/* ==========================================================================
   Psy.Link — Page « motif de consultation » (landing SEO)
   Dépend de site.css (tokens, base, boutons) et de accueil.css
   (sections psychologues / avis / FAQ / CTA finale, mutualisées en elements).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page
   -------------------------------------------------------------------------- */
.motif-heros {
    position: relative;
    /* L'en-tête sticky occupe une place dans le flux : on remonte le héros
       dessous pour que la navbar transparente se superpose à l'aplat sombre. */
    margin-top: calc(var(--entete-h) * -1);
    padding: calc(var(--entete-h) + 56px) 0 60px;
    color: rgba(255, 255, 255, .84);
    border-radius: 0 0 44px 44px;
    overflow: hidden;
    background:
        radial-gradient(760px 440px at 12% -10%, rgba(49, 169, 159, .5) 0%, rgba(49, 169, 159, 0) 60%),
        radial-gradient(620px 380px at 92% 14%, rgba(255, 174, 30, .16) 0%, rgba(255, 174, 30, 0) 62%),
        linear-gradient(168deg, #094a59 0%, #0B5768 48%, #0e6a79 100%);
}

.motif-heros-fond {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    top: -120px;
    border-radius: 50%;
    background: rgba(84, 214, 197, .22);
    filter: blur(90px);
    pointer-events: none;
}

.motif-heros-grille {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: center;
}

.motif-heros-texte {
    min-width: 0;
}

/* Fil d'ariane */
.fil-ariane {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 18px;
}

.fil-ariane a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.fil-ariane a:hover {
    color: #fff;
    text-decoration: underline;
}

.motif-heros h1 {
    color: #fff;
    font-family: var(--ff-titre);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    margin-bottom: 18px;
}

.motif-heros-accroche {
    font-size: 17px;
    line-height: 1.6;
    max-width: 54ch;
    margin-bottom: 26px;
}

.motif-heros-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

/* Bande de réassurance sous les boutons : une seule ligne, discrète — elle
   rassure sans concurrencer le titre ni les boutons d'action. */
.motif-heros-reassurance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13.5px;
}

.motif-heros-reassurance li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .72);
}

.motif-heros-reassurance svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #6fd7c6;
}

.motif-heros-reassurance strong {
    font-weight: 800;
    color: #fff;
}

.motif-heros-illustration img {
    width: 100%;
    height: auto;
    max-width: 440px;
    margin-left: auto;
    border-radius: var(--rayon);
    box-shadow: var(--ombre-lg);
}

/* --------------------------------------------------------------------------
   2. CTA divisé — à distance / près de chez soi
   -------------------------------------------------------------------------- */
.section-consulter {
    padding: 76px 0;
    background: var(--doux);
}

.grille-consulter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 44px;
    align-items: start;
}

.carte-consulter {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
}

.carte-consulter-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--vert-clair);
    color: var(--teal);
    margin-bottom: 16px;
}

.carte-consulter-icone svg {
    width: 23px;
    height: 23px;
}

.carte-consulter-proximite .carte-consulter-icone {
    background: rgba(255, 174, 30, .16);
    color: #8a6410;
}

.carte-consulter h3 {
    font-family: var(--ff-titre);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--teal);
    margin-bottom: 10px;
}

.carte-consulter>p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gris);
    margin-bottom: 18px;
}

.carte-consulter-points {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 9px;
}

.carte-consulter-points li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--encre);
}

.carte-consulter-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--vert-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7f77' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}

.carte-consulter-actions {
    margin-top: auto;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.lien-discret {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teal-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lien-discret:hover {
    color: var(--teal);
}

/* Colonne proximité : carte + villes */
.proximite-corps {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin-top: auto;
}

.proximite-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-clair);
    margin-bottom: 10px;
}

.proximite-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.puce-ville {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal);
    background: var(--vert-clair);
    border: 1px solid transparent;
    border-radius: var(--rayon-pill);
    transition: background-color .16s ease, border-color .16s ease;
}

.puce-ville:hover {
    background: #fff;
    border-color: var(--vert);
}

/* --------------------------------------------------------------------------
   3. Carte de France
   -------------------------------------------------------------------------- */
.carte-france-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.carte-france-contour {
    fill: var(--vert-clair);
    stroke: rgba(49, 169, 159, .55);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.carte-france-ville {
    cursor: pointer;
}

.carte-france-halo {
    fill: var(--vert);
    opacity: 0;
    transition: opacity .18s ease;
}

.carte-france-point {
    fill: var(--teal);
    stroke: #fff;
    stroke-width: 1.4;
    transition: fill .18s ease;
}

.carte-france-ville:hover .carte-france-halo,
.carte-france-ville:focus-visible .carte-france-halo {
    opacity: .28;
}

.carte-france-ville:hover .carte-france-point,
.carte-france-ville:focus-visible .carte-france-point {
    fill: var(--ambre);
}

/* --------------------------------------------------------------------------
   4. Article : sommaire latéral + contenu
   -------------------------------------------------------------------------- */
.section-article {
    padding: 80px 0;
    background: #fff;
}

.article-grille {
    display: grid;
    grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

/* Un article sans titre de section n'a pas de sommaire : le corps se retrouve
   alors seul dans la grille, et tombait dans la colonne étroite réservée à
   celui-ci. Il reprend ici toute la largeur, borné à une longueur de ligne
   lisible. `:only-child` vise exactement ce cas, sans qu'aucun gabarit ait à
   signaler l'absence de sommaire. */
.article-grille>.article-contenu:only-child {
    grid-column: 1 / -1;
    max-width: 800px;
    margin-inline: auto;
}

/* Le sommaire suit le défilement */
.article-sommaire {
    position: sticky;
    top: calc(var(--entete-h) + 20px);
}

.article-sommaire-boite {
    padding: 22px;
    background: var(--doux);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    /* Sommaire long : il défile dans sa propre boîte plutôt que de dépasser */
    max-height: calc(100vh - var(--entete-h) - 60px);
    overflow-y: auto;
}

.article-sommaire-titre {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-clair);
    margin-bottom: 14px;
}

.article-sommaire nav ol {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    /* Filet vertical le long du sommaire */
    border-left: 2px solid var(--ligne);
}

.article-sommaire nav li {
    margin: 0;
}

.article-sommaire nav li.niveau-3 a {
    padding-left: 28px;
    font-size: 13px;
    color: var(--gris-clair);
}

.article-sommaire nav a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--gris);
    transition: color .16s ease, border-color .16s ease;
}

.article-sommaire nav a:hover {
    color: var(--teal);
}

.article-sommaire nav a.est-courant {
    color: var(--teal);
    font-weight: 700;
    border-left-color: var(--vert);
}

.article-sommaire-cta {
    margin-top: 4px;
}

/* Corps rédactionnel */
.article-contenu {
    min-width: 0;
    /* Longueur de ligne confortable en lecture */
    max-width: 72ch;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--encre);
}

.article-contenu h2 {
    font-family: var(--ff-titre);
    font-size: clamp(23px, 2.2vw, 28px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--teal);
    margin: 52px 0 16px;
    /* L'ancre ne doit pas passer sous l'en-tête sticky */
    scroll-margin-top: calc(var(--entete-h) + 24px);
}

.article-contenu h2:first-child {
    margin-top: 0;
}

.article-contenu h3 {
    font-family: var(--ff-titre);
    font-size: 19.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--encre);
    margin: 36px 0 12px;
    scroll-margin-top: calc(var(--entete-h) + 24px);
}

.article-contenu h4 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--encre);
    margin: 28px 0 10px;
    scroll-margin-top: calc(var(--entete-h) + 24px);
}

.article-contenu p {
    margin: 0 0 18px;
}

.article-contenu ul,
.article-contenu ol {
    margin: 0 0 20px;
    padding-left: 22px;
    /* site.css remet toutes les listes à plat (list-style: none) : dans le
       contenu rédactionnel, les puces sont au contraire indispensables — et
       la règle ::marker ci-dessous n'a d'effet que si elles existent. */
    list-style: disc;
}

.article-contenu ol {
    list-style: decimal;
}

.article-contenu li {
    margin-bottom: 9px;
}

.article-contenu li::marker {
    color: var(--vert);
}

.article-contenu strong {
    color: var(--teal);
    font-weight: 700;
}

.article-contenu em {
    color: var(--gris);
}

/* Uniquement les liens de prose : les boutons et puces des CTA insérés dans le
   contenu portent une classe et gardent leur propre habillage. */
.article-contenu a:not([class]) {
    color: var(--teal-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Citation mise en exergue */
.article-contenu blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--vert);
    font-size: 17.5px;
    font-style: italic;
    color: var(--teal);
}

.article-contenu blockquote p:last-child {
    margin-bottom: 0;
}

.article-contenu blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--gris);
}

/* Illustrations : cadrées, centrées, jamais collées au texte. */
.article-contenu figure {
    margin: 34px 0;
}

.article-contenu img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--rayon);
}

.article-contenu figure img {
    box-shadow: var(--ombre-sm);
}

.article-contenu figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gris-clair);
}

/* Un bouton hérité du contenu se pose comme un bloc, pas au fil du texte. */
.article-contenu .btn {
    margin: 6px 0 12px;
}

.article-contenu hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--ligne);
}

/* Tableaux et vidéos : ils ne doivent jamais élargir la colonne de lecture. */
.article-contenu table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 28px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.article-contenu th,
.article-contenu td {
    padding: 10px 14px;
    border: 1px solid var(--ligne);
    text-align: left;
    vertical-align: top;
}

.article-contenu th {
    background: var(--doux);
    color: var(--teal);
    font-weight: 700;
}

.article-contenu iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 32px 0;
    border: 0;
    border-radius: var(--rayon);
}

/* Le premier et le dernier bloc calent la colonne : pas de marge orpheline. */
.article-contenu>:first-child {
    margin-top: 0;
}

.article-contenu>:last-child {
    margin-bottom: 0;
}

.article-avertissement {
    margin-top: 44px;
    padding: 16px 18px;
    background: var(--doux);
    border-left: 3px solid var(--gris-clair);
    border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gris);
}

/* --------------------------------------------------------------------------
   5. CTA insérés dans le contenu (shortcodes)
   -------------------------------------------------------------------------- */
.cta-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 36px 0;
    padding: 24px 26px;
    border-radius: var(--rayon);
    /* Le CTA déborde légèrement de la colonne de texte pour se détacher */
    border: 1px solid var(--ligne);
    background: var(--doux);
}

.cta-contenu-texte {
    flex: 1 1 300px;
    min-width: 0;
}

.cta-contenu-texte strong {
    display: block;
    font-family: var(--ff-titre);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--teal);
    margin-bottom: 5px;
}

.cta-contenu-texte p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--gris);
}

.cta-contenu .btn {
    flex: 0 0 auto;
}

/* Les boutons des CTA sont posés à l'intérieur de .article-contenu : on
   réaffirme leur couleur ici pour qu'aucune règle de prose (présente ou
   ajoutée plus tard) ne puisse la recouvrir par spécificité. */
.article-contenu .cta-contenu .btn-principal,
.cta-contenu .btn-principal {
    color: #fff;
}

.article-contenu .cta-contenu .btn-ambre,
.cta-contenu .btn-ambre {
    color: var(--ambre-fonce);
}

.article-contenu .cta-contenu .btn-fantome,
.cta-contenu .btn-fantome {
    color: var(--teal);
}

.article-contenu .cta-contenu .puce-ville,
.cta-contenu .puce-ville {
    color: var(--teal);
    text-decoration: none;
}

.cta-contenu-principal {
    background: var(--vert-clair);
    border-color: rgba(49, 169, 159, .35);
}

.cta-contenu-visio {
    background: rgba(255, 174, 30, .12);
    border-color: rgba(255, 174, 30, .38);
}

.cta-contenu-visio .cta-contenu-texte strong {
    color: #8a6410;
}

.cta-contenu-villes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

/* --------------------------------------------------------------------------
   5 bis. Habillages des CTA — attribut style="…" des shortcodes
   Voir App\View\Helper\ContenuHelper::STYLES. Ces règles viennent APRÈS les
   variantes thématiques (.cta-contenu-principal, -visio…) : à spécificité
   égale, c'est l'habillage demandé par la rédaction qui l'emporte.
   -------------------------------------------------------------------------- */

/* « encadre » : l'apparence de base, déjà portée par .cta-contenu. */

/* « bandeau » : aplat plein, pour l'appel principal d'un article. */
.cta-contenu.cta-style-bandeau {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.cta-contenu.cta-style-bandeau .cta-contenu-texte strong,
.cta-contenu.cta-style-bandeau .cta-contenu-texte p {
    color: #fff;
}

.cta-contenu.cta-style-bandeau .cta-contenu-texte p {
    opacity: .88;
}

.article-contenu .cta-contenu.cta-style-bandeau .btn-principal,
.cta-contenu.cta-style-bandeau .btn-principal {
    background: #fff;
    color: var(--teal);
}

/* « minimal » : ne coupe pas la lecture, juste un filet coloré. */
.cta-contenu.cta-style-minimal {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--vert);
    border-radius: 0;
    padding: 6px 0 6px 20px;
    margin: 28px 0;
    gap: 14px;
}

.cta-contenu.cta-style-minimal .cta-contenu-texte strong {
    font-size: 16px;
}

.article-contenu .cta-contenu.cta-style-minimal .btn,
.cta-contenu.cta-style-minimal .btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--vert-fonce);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* « carte » : détachée du fil, pour attirer l'œil au milieu d'un long texte. */
.cta-contenu.cta-style-carte {
    background: #fff;
    border-color: transparent;
    box-shadow: var(--ombre);
    padding: 28px 30px;
}

/* « accent » : réservé aux propositions à durée limitée. */
.cta-contenu.cta-style-accent {
    background: rgba(255, 174, 30, .14);
    border-color: rgba(255, 174, 30, .5);
}

.cta-contenu.cta-style-accent .cta-contenu-texte strong {
    color: #8a6410;
}

/* Icône posée devant le titre des encarts du blog. */
.cta-contenu-icone {
    vertical-align: -3px;
    margin-right: 7px;
}

/* Format du fichier, rappelé sur le bouton de téléchargement. */
.cta-contenu-format {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .22);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   6. Autres motifs (maillage interne)
   -------------------------------------------------------------------------- */
.section-autres-motifs {
    padding: 76px 0;
    background: var(--doux);
}

.grille-autres-motifs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.carte-autre-motif {
    position: relative;
    display: block;
    padding: 22px 52px 22px 24px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.carte-autre-motif:hover {
    transform: translateY(-3px);
    border-color: var(--vert);
    box-shadow: var(--ombre);
}

.carte-autre-motif strong {
    display: block;
    font-family: var(--ff-titre);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--teal);
    margin-bottom: 5px;
}

.carte-autre-motif>span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gris);
}

.carte-autre-motif-fleche {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--vert);
    transition: transform .2s ease;
}

.carte-autre-motif-fleche svg {
    width: 18px;
    height: 18px;
}

.carte-autre-motif:hover .carte-autre-motif-fleche {
    transform: translateY(-50%) translateX(4px);
}

/* --------------------------------------------------------------------------
   7. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .article-grille {
        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
        gap: 36px;
    }

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

@media (max-width: 900px) {
    .motif-heros-grille {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .motif-heros-illustration {
        order: -1;
    }

    .motif-heros-illustration img {
        max-width: 300px;
        margin: 0 auto;
    }

    .grille-consulter {
        grid-template-columns: 1fr;
    }

    /* Sur mobile le sommaire passe au-dessus du texte, en accordéon compact */
    .article-grille {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .article-sommaire {
        position: static;
    }

    .article-sommaire-boite {
        max-height: none;
    }

    .article-contenu {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .motif-heros {
        padding-bottom: 44px;
        border-radius: 0 0 28px 28px;
    }

    .motif-heros-reassurance {
        gap: 8px;
    }

    .motif-heros-reassurance li {
        flex: 1 1 140px;
        padding: 9px 12px;
    }

    .section-consulter,
    .section-article,
    .section-autres-motifs {
        padding: 52px 0;
    }

    .carte-consulter {
        padding: 22px;
    }

    .proximite-corps {
        grid-template-columns: 1fr;
    }

    .carte-france {
        max-width: 220px;
        margin: 0 auto;
    }

    .grille-autres-motifs {
        grid-template-columns: 1fr;
    }

    .cta-contenu {
        padding: 20px;
    }

    .cta-contenu .btn {
        width: 100%;
    }
}