/* =============================================================================
   intention-v7 : hubs d'audience (/associations/, /entreprises/,
   /collectivites/) et pages d'intention (/{audience}/{slug}).

   Une page d'intention est une page de lecture : un titre d'affichage, un
   chapeau, un corps redige, puis des cartes de maillage. Elle n'a pas de
   colonne laterale, contrairement aux fiches, et pas d'apercu produit,
   contrairement a produit-v7. Ce fichier ne pose donc que la colonne unique,
   la typographie du corps, et la grille de cartes.

   Le titre d'affichage vient de base-v7.css : cette famille est la troisieme a
   le reclamer, et c'est ce qui a decide de sa promotion. Seul l'ecart de
   taille du h1 est ici.

   Aucune couleur en dur : uniquement des var(--ex-*) de tokens.css, pour que
   le mode sombre suive.
   ============================================================================= */

/* --- Colonne unique ----------------------------------------------------------
   .v7 est une grille a deux colonnes pensee pour les fiches (contenu + lateral).
   Ici la racine EST le main et il n'y a rien a mettre a cote : on remet une
   seule piste, et la mesure de lecture est plafonnee sur le conteneur plutot
   que sur chaque bloc, pour que les cartes s'alignent sur le texte. */

.v7.intention {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
    row-gap: 34px;
    align-content: start;
}

.v7.intention > * { grid-column: 1 / -1; }

/* Le h1 est une phrase de recherche, pas deux mots : meme cran que les pages
   produit. */
.v7.intention .titre-page h1 {
    font-size: 40px;
    line-height: 1.1;
    text-wrap: balance;
}

@media (max-width: 720px) {
    .v7.intention .titre-page h1 { font-size: 28px; }
}

/* --- Visuel a la une ---------------------------------------------------------
   Il ouvre la page, donc il est le LCP : dimensions declarees pour que rien ne
   saute quand il arrive. */

.v7.intention .visuel {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 22px;
    border-radius: 14px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* --- Actions -----------------------------------------------------------------
   Un bouton qui engage, un lien qui laisse regarder avant de s'engager. Centre,
   parce que le titre l'est aussi sur cette famille. */

.v7.intention .actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 26px;
}
.v7.intention .actions .bouton-primaire {
    padding: 13px 26px;
    font-size: 15px;
}
.v7.intention .actions .lien-action { font-size: 14px; font-weight: 600; }

/* --- Corps -------------------------------------------------------------------
   Le HTML de ce bloc est genere depuis du Markdown : on ne peut pas y poser de
   classes, tout se style par element. base-v7 a neutralise les marges, les
   puces et les tailles de titre pour la v7 : il faut les rendre ici, et
   seulement ici. */

.v7.intention .corps {
    max-width: 44rem;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ex-stone-700);
}

.v7.intention .corps h2 {
    margin-top: 40px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ex-stone-900);
    text-wrap: balance;
}
.v7.intention .corps h3 {
    margin-top: 28px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ex-stone-900);
}
.v7.intention .corps > :first-child { margin-top: 0; }

.v7.intention .corps p { margin-top: 16px; }

.v7.intention .corps ul,
.v7.intention .corps ol {
    margin-top: 16px;
    padding-left: 22px;
}
.v7.intention .corps ul { list-style: disc; }
.v7.intention .corps ol { list-style: decimal; }
.v7.intention .corps li { margin-top: 8px; }
.v7.intention .corps li::marker { color: var(--ex-stone-400); }

.v7.intention .corps strong { font-weight: 700; color: var(--ex-stone-900); }

.v7.intention .corps a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--ex-link);
}
.v7.intention .corps a:hover { text-decoration-color: var(--ex-link-hover); }

.v7.intention .corps blockquote {
    margin: 22px 0 0;
    padding-left: 18px;
    border-left: 3px solid var(--accent-clair);
    color: var(--ex-stone-600);
}

@media (max-width: 720px) {
    .v7.intention .corps { font-size: 15px; }
    .v7.intention .corps h2 { font-size: 21px; }
}

/* --- Cartes de maillage ------------------------------------------------------
   Meme objet pour les exemples concrets, les voisines et les intentions d'un
   hub : un titre qui est la phrase de la page cible, et son chapeau en dessous.
   La carte entiere est cliquable, le lien porte tout le contenu. */

.v7.intention .cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.v7.intention .cartes a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 14px;
    box-shadow: var(--ex-shadow-sm);
    color: inherit;
    transition: border-color .15s var(--ex-ease), box-shadow .15s var(--ex-ease), transform .15s var(--ex-ease);
}
.v7.intention .cartes a:hover {
    border-color: var(--accent-clair);
    box-shadow: var(--ex-shadow-md);
    transform: translateY(-2px);
    color: inherit;
}

.v7.intention .carte-titre {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ex-stone-900);
    text-wrap: balance;
}
.v7.intention .carte-extrait {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ex-stone-600);
    /* Les chapeaux sont ecrits pour la page cible, pas pour la carte : on en
       montre l'amorce et on laisse le clic faire le reste. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Titres de section -------------------------------------------------------
   Exemples concrets, maillage, postures d'un hub : meme rang visuel. */

.v7.intention .exemples h2,
.v7.intention .maillage h2,
.v7.intention .posture h2,
.v7.intention .produits h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
    padding-top: 18px;
    border-top: 1px solid var(--ex-stone-200);
}

/* --- Renvoi vers la page produit ---------------------------------------------
   Une ligne, pas une carte : le CTA principal a deja fait le travail en haut de
   page, celui-ci ne fait que nommer l'outil pour qui veut le detail. */

.v7.intention .renvoi-produit {
    display: block;
    max-width: 44rem;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--ex-stone-50);
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
}
.v7.intention .renvoi-libelle {
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
.v7.intention .renvoi-produit a {
    font-size: 16px;
    font-weight: 700;
    color: var(--ex-link-action);
}
.v7.intention .renvoi-produit a:hover { color: var(--ex-link-action-hover); }

.v7.intention .maillage-hub {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
}

/* --- Liste des outils d'un hub ----------------------------------------------- */

.v7.intention .liste-produits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 18px;
}
.v7.intention .liste-produits a {
    display: inline-block;
    padding: 9px 16px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ex-link-action);
    transition: border-color .15s var(--ex-ease), background .15s var(--ex-ease);
}
.v7.intention .liste-produits a:hover {
    border-color: var(--accent-clair);
    background: var(--ex-stone-50);
    color: var(--ex-link-action-hover);
}

/* Le chevron des liens d'action : dessine dans le markup par un span, attenue
   ici pour qu'il ne pese pas autant que le libelle. */
.v7.intention .sep { color: var(--ex-stone-400); }