/* ── Page d'accueil des professionnels (/devenir-partenaire) ───────────────────

   Vocabulaire du site, rien d'inventé : titres Poltawski Nowy, texte Afacad,
   dégradé lavande du bandeau de l'accueil, cartes blanches arrondies, coches
   bleutées, boutons au relief de ceux des fiches.

   UNE SEULE COLONNE POUR TOUT. Chaque section, teintée ou non, pose son contenu
   dans .partnerWrap. C'est ce qui fait que les titres tombent exactement sur la
   même verticale : une section teintée occupe toute la largeur de l'écran pour
   que sa teinte aille d'un bord à l'autre, mais son contenu reste dans la même
   colonne que les autres. Sans cela, les sections pleine largeur décalaient
   leur titre de la valeur du padding, et ça se voyait. */

.partnerWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ── Bandeau ── */

.partnerHero{
    background: linear-gradient(
        135deg,
        rgba(146, 3, 255, 0.1) 25%,
        rgba(253, 186, 255, 0.4) 50%,
        rgba(211, 179, 255, 0.4) 120%
    );
    padding: 72px 0 84px;
}

/* Le texte porte le message, l'aperçu le prouve : deux colonnes, la seconde
   plus étroite pour rester un appui et non un sujet. */
.partnerHeroGrid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: center;
}

.partnerEyebrow{
    margin: 0 0 14px;
    font-family: 'Afacad';
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a3d6b;
}

.partnerTitle{
    margin: 0 0 20px;
    font-family: 'Poltawski Nowy';
    font-size: 52px;
    font-weight: 700;
    line-height: 108%;
    text-wrap: balance;
}

.partnerLead{
    margin: 0 0 30px;
    max-width: 560px;
    font-family: 'Afacad';
    font-size: 21px;
    line-height: 1.45;
    text-wrap: pretty;
}

/* ── Boutons ── */

.partnerActions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}


/* Même relief que le bouton principal des fiches */


/* ── Réassurance, coches identiques à celles du bandeau de l'accueil ── */

.partnerTrust{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Afacad';
    font-size: 17px;
    color: #1f1f1f;
}

.partnerTrust li{
    display: flex;
    align-items: center;
    gap: 8px;
}

.partnerTrust li::before{
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #B3C4FF;
    font-size: 13px;
    line-height: 1;
}

/* ── Aperçu d'une fiche réelle ── */

.partnerPreview{
    font-family: 'Afacad';
    text-align: center;
}

.partnerPreviewCaption{
    margin: 0 0 12px;
    font-size: 16px;
    color: #4a3d6b;
}

.partnerCardPro{
    display: block;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 24px rgba(74, 61, 107, 0.18);
    /* Légèrement incliné : la carte se lit comme un échantillon posé sur la page,
       pas comme un élément d'interface avec lequel on doit compter. */
    transform: rotate(-1.4deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partnerCardPro:hover{
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 10px 30px rgba(74, 61, 107, 0.24);
}

.partnerCardProPhoto{
    display: block;
    height: 190px;
    background-color: #EDE7FF;
}

.partnerCardProPhoto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.partnerCardProBody{
    display: block;
    padding: 16px 18px 20px;
    text-align: left;
}

.partnerCardProName{
    display: block;
    font-family: 'Poltawski Nowy';
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.partnerCardProCity{
    display: block;
    margin-top: 4px;
    font-size: 16px;
    color: #6b6b6b;
}

.partnerCardProPrice{
    display: block;
    margin-top: 8px;
    font-size: 17px;
    font-weight: 600;
}

.partnerCardProNote{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 16px;
}

.partnerCardProStar{
    color: #FFD500;
    font-size: 17px;
}

.partnerCardProCount{
    color: #6b6b6b;
}

.partnerPreviewHint{
    margin: 14px 0 0;
    font-size: 15px;
    color: #6b6b6b;
}

/* ── Corps ── */

.partnerMain{
    font-family: 'Afacad';
}

/* style.css pose Poppins sur chaque élément (sélecteur « * ») : la police de
   .partnerMain, .partnerTrust ou .partnerPreview ne descend pas jusqu'aux
   paragraphes, puces, liens et lignes de la carte d'aperçu, on la leur redonne
   ici. Les titres gardent la leur, déclarée sur leur propre classe. */
.partnerMain p,
.partnerMain li,
.partnerTrust li,
.partnerPreview p,
.partnerCardProBody span,
.partnerCtaSmall a,
.partnerCtaText strong{
    font-family: 'Afacad';
}

.partnerSection{
    padding: 68px 0;
}

/* Une section sur deux est teintée : le fond du site étant blanc, des sections
   blanches ne se distingueraient pas et la page se lirait comme un seul bloc. */
.partnerTinted{
    background-color: #F8F6FF;
}

.partnerSectionTitle{
    margin: 0 0 14px;
    font-family: 'Poltawski Nowy';
    font-size: 36px;
    font-weight: 600;
    text-wrap: balance;
}

.partnerSectionLead{
    margin: 0 0 32px;
    max-width: 680px;
    font-size: 19px;
    line-height: 1.5;
    color: #434343;
    text-wrap: pretty;
}

.partnerSectionTitle + .partnerCards,
.partnerSectionTitle + .partnerStepList,
.partnerSectionTitle + .partnerFeatures,
.partnerSectionTitle + .partnerFaqList{
    margin-top: 34px;
}

/* ── Trois cartes ── */

.partnerCards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.partnerCard{
    padding: 28px;
    background-color: #fff;
    border: 1px solid #F0EDFA;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.partnerCardIcon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    background-color: #EDE7FF;
    color: #4a3d6b;
}

.partnerCardTitle{
    margin: 0 0 10px;
    font-family: 'Poltawski Nowy';
    font-size: 21px;
    font-weight: 600;
    text-wrap: balance;
}

.partnerCardText{
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #434343;
}

/* ── Étapes ── */

.partnerStepList{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.partnerStep{
    padding: 26px 22px;
    background-color: #fff;
    border: 1px solid #EDE7FF;
    border-radius: 18px;
}

.partnerStepNum{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: #B3C4FF;
    font-family: 'Poltawski Nowy';
    font-size: 21px;
    font-weight: 700;
}

.partnerStepTitle{
    margin: 0 0 8px;
    font-family: 'Poltawski Nowy';
    font-size: 20px;
    font-weight: 600;
    text-wrap: balance;
}

.partnerStepText{
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #434343;
}

/* ── Contenu d'une fiche ── */

.partnerFeatures{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.45;
}

.partnerFeatures li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #434343;
}

.partnerFeatures li::before{
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #B3C4FF;
    color: #000;
    font-size: 13px;
    line-height: 1;
}

/* ── Gratuit ── */

.partnerFree{
    max-width: 720px;
}

.partnerFreeText{
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.5;
    color: #2b2b2b;
    text-wrap: pretty;
}

.partnerFreeNote{
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #6b6b6b;
    text-wrap: pretty;
}

/* ── Questions ── */

/* La liste occupe toute la largeur de .partnerWrap, comme les sections du
   dessus : elle était bornée à 820 px dans un conteneur de 1100, donc calée à
   gauche avec le titre mais s'arrêtant bien avant le bord droit, et la page
   paraissait de travers à cet endroit. */
.partnerFaqList{
    width: 100%;
}

.partnerFaqItem{
    background-color: #fff;
    border: 1px solid #EDE7FF;
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.partnerFaqItem:hover,
.partnerFaqItem[open]{
    border-color: #B3C4FF;
}

.partnerFaqQ{
    padding: 18px 52px 18px 22px;
    font-family: 'Afacad';
    font-size: 19px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    position: relative;
}

/* Le marqueur natif retiré des deux façons : Safari n'écoute que la seconde */
.partnerFaqQ::-webkit-details-marker{
    display: none;
}

.partnerFaqQ::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #4a3d6b;
    border-bottom: 2px solid #4a3d6b;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.partnerFaqItem[open] .partnerFaqQ::after{
    transform: translateY(-20%) rotate(225deg);
}

.partnerFaqQ:focus-visible{
    outline: 2px solid #4a3d6b;
    outline-offset: -2px;
}

.partnerFaqA{
    padding: 0 22px 20px;
    font-size: 18px;
    line-height: 1.55;
    color: #434343;
}

/* La réponse garde une longueur de ligne lisible même si l'encadré, lui, va
   jusqu'au bord : au-delà d'une certaine largeur, l'œil perd la ligne suivante
   en revenant à la marge. C'est le texte qu'on borne, pas le cadre. */
.partnerFaqA p{
    margin: 0;
    max-width: 78ch;
    text-wrap: pretty;
}

/* ── Dernier appel ── */

.partnerCta{
    padding: 72px 0 88px;
    text-align: center;
    background: linear-gradient(
        135deg,
        rgba(146, 3, 255, 0.1) 25%,
        rgba(253, 186, 255, 0.4) 50%,
        rgba(211, 179, 255, 0.4) 120%
    );
}

.partnerCtaTitle{
    margin: 0 0 12px;
    font-family: 'Poltawski Nowy';
    font-size: 40px;
    font-weight: 700;
}

.partnerCtaText{
    max-width: 560px;
    margin: 0 auto 26px;
    font-family: 'Afacad';
    font-size: 19px;
    line-height: 1.5;
    text-wrap: pretty;
}

.partnerCtaSmall{
    margin: 22px 0 0;
    font-family: 'Afacad';
    font-size: 17px;
    color: #434343;
}

.partnerCtaSmall a{
    color: #000;
    text-underline-offset: 3px;
}

/* ── Responsive ── */

@media (max-width: 1024px){
    /* L'aperçu passe sous le texte : à cette largeur, deux colonnes rendraient
       le titre illisible pour sauver une vignette. */
    .partnerHeroGrid{
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .partnerPreview{
        max-width: 320px;
    }

    .partnerCardPro{
        transform: none;
    }

    .partnerTitle{
        font-size: 44px;
    }

    .partnerCards{
        grid-template-columns: repeat(2, 1fr);
    }

    /* Trois cartes sur deux colonnes : la troisième, seule sur sa ligne, laissait
       une cellule vide à sa droite. Elle prend toute la largeur. Sans effet sous
       769 px, où la grille n'a plus qu'une colonne. */
    .partnerCard:last-child:nth-child(odd){
        grid-column: 1 / -1;
    }

    .partnerStepList{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .partnerWrap{
        padding: 0 20px;
    }

    .partnerHero{
        padding: 48px 0 60px;
    }

    .partnerTitle{
        font-size: 35px;
    }

    .partnerLead{
        font-size: 19px;
    }

    .partnerSection{
        padding: 48px 0;
    }

    .partnerSectionTitle{
        font-size: 29px;
    }

    .partnerCards,
    .partnerStepList,
    .partnerFeatures{
        grid-template-columns: 1fr;
    }

    .partnerFreeText{
        font-size: 19px;
    }

    .partnerCtaTitle{
        font-size: 32px;
    }
}

@media (max-width: 480px){
    .partnerActions{
        flex-direction: column;
        align-items: stretch;
    }


    .partnerPreview{
        max-width: none;
    }
}

/* Tablette : l'aperçu passe sous le texte ; centré, il ne laisse plus la moitié
   droite vide. Borné à 481 px : en dessous, l'aperçu occupe toute la largeur
   (bloc 480). */
@media (min-width: 481px) and (max-width: 1024px){
    .partnerPreview{
        justify-self: center;
    }
}