/* =============================================================================
   produit-v7 : pages produit (/static/publier-une-annonce.html et suivantes)

   Ces pages sont des atterrissages de recherche : un titre d'affichage, deux ou
   trois cartes, une banniere d'action, une FAQ courte. C'est exactement la
   grammaire de tarifs-v7.css, mais tarifs-v7 est scope .v7.tarifs et ne doit
   pas devenir une feuille fourre-tout. Ce fichier reprend donc les seuls blocs
   partages (titre de page, FAQ, banniere) sous .v7.produit, et y ajoute ce qui
   est propre aux pages produit : la liste de definitions des variantes et les
   rangees posees directement dans une carte.

   Le jour ou une troisieme famille de pages reclame le meme titre d'affichage,
   c'est ce fichier qu'il faudra promouvoir dans base-v7.css, pas le dupliquer
   une fois de plus.

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

/* --- Titre de page -----------------------------------------------------------
   Identique a la page tarifs : hors carte, centre, il pose la position avant
   que les cartes ne la detaillent. */

.v7.produit .titre-page {
    text-align: center;
    padding: 26px 20px 8px;
}

.v7.produit .surtitre {
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    /* Suit l'accent du type pose par data-orga sur la racine. Sans data-orga,
       --accent-titre vaut deja --ex-amber-700 : les pages sans type ne changent
       pas d'apparence. */
    color: var(--accent-titre);
}

/* Un cran sous les 52px de la page tarifs : ce h1 est une phrase de recherche,
   pas deux mots, et il doit tenir en deux lignes sur un ecran courant. */
.v7.produit .titre-page h1 {
    margin-top: 14px;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ex-stone-900);
    text-align: center;
    text-wrap: balance;
}

.v7.produit .titre-page .chapeau {
    margin: 18px auto 0;
    max-width: 46rem;
    text-align: center;
}
/* <b> et non <strong> : mise en relief d'un mot-cle, pas emphase de sens. Le
   poids est pose ici, le gras par defaut du navigateur serait lourd sur 16px. */
.v7.produit .titre-page .chapeau b {
    font-weight: 700;
    color: var(--ex-stone-900);
}

@media (max-width: 720px) {
    .v7.produit .titre-page { padding: 14px 4px 4px; }
    .v7.produit .titre-page h1 { font-size: 30px; }
}

/* --- Liste des variantes -----------------------------------------------------
   Une liste de definitions dans une .carte-liste : le terme nomme la variante,
   la definition l'illustre. .carte-liste ne donne sa gouttiere qu'a > ul et
   > .invite, il faut la rendre au <dl>.

   Deux colonnes en grille, ce qui suffit a rendre exactement la ligne de la
   page tarifs (rubrique en capitales grises a gauche, phrase a droite) sans un
   seul element de plus : dans une grille a deux pistes, chaque dt tombe en
   colonne 1 et le dd qui le suit en colonne 2. */

.v7.produit .carte-liste > .types {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: baseline;
    padding: 6px 18px 16px;
}

.v7.produit .types dt,
.v7.produit .types dd {
    padding: 13px 0;
    border-top: 1px solid var(--ex-stone-100);
}
.v7.produit .types dt:first-of-type,
.v7.produit .types dt:first-of-type + dd { border-top: 0; }

/* Colonne 1, la variante. Meme traitement que les labels de rangee de la v7 :
   capitales grises, c'est un nom de champ, pas un titre. */
.v7.produit .types dt {
    padding-right: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}

/* Colonne 2, la phrase. C'est elle qu'on lit, elle porte le corps de texte. */
.v7.produit .types dd {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ex-stone-800);
}

/* Sous 640px la ligne a deux colonnes ne tient plus : le terme passe au-dessus
   de sa definition. L'association dt/dd reste lue par les lecteurs d'ecran. */
@media (max-width: 640px) {
    .v7.produit .carte-liste > .types { grid-template-columns: minmax(0, 1fr); }
    .v7.produit .types dt { padding: 14px 0 0; }
    .v7.produit .types dt:first-of-type { padding-top: 4px; }
    .v7.produit .types dd { padding: 3px 0 0; border-top: 0; }
}

/* --- Rangees posees directement dans une carte -------------------------------
   Sur une fiche, .rangee vit dans .donnees qui lui donne sa gouttiere. Ici la
   carte n'a pas de conteneur intermediaire : la gouttiere est portee par la
   rangee elle-meme, alignee sur les 18px de l'en-tete de .carte-bloc. */

.v7.produit .carte-bloc > .rangee { margin: 0 18px; }
.v7.produit .carte-bloc > .rangee:first-of-type { border-top: 0; padding-top: 16px; }
.v7.produit .carte-bloc > .rangee:last-child { padding-bottom: 18px; }

@media (max-width: 640px) {
    .v7.produit .carte-bloc > .rangee { margin: 0 16px; }
}

/* --- FAQ ---------------------------------------------------------------------
   Liste de definitions, pas de repliage : deux ou trois reponses courtes se
   lisent d'une traite. */

.v7.produit .faq > h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ex-stone-900);
}
.v7.produit .faq .developpe {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ex-stone-500);
}

.v7.produit .questions {
    padding: 6px 26px 22px;
}
.v7.produit .questions dt {
    margin-top: 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ex-stone-900);
}
.v7.produit .questions dt:first-of-type { margin-top: 16px; }
/* Le chevron marque la reponse sans ajouter d'element : la puce d'une liste de
   definitions n'existe pas, on la dessine. */
.v7.produit .questions dd {
    position: relative;
    margin-top: 6px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ex-stone-700);
}
.v7.produit .questions dd::before {
    content: '>';
    position: absolute;
    left: 2px;
    font-family: var(--ex-mono);
    font-weight: 700;
    color: var(--ex-amber-600);
}
.v7.produit .questions dd + dt {
    padding-top: 22px;
    border-top: 1px solid var(--ex-stone-100);
}

@media (max-width: 640px) {
    .v7.produit .faq > h2 { font-size: 23px; }
    .v7.produit .questions { padding: 4px 18px 18px; }
}

/* --- Banniere d'appel a l'action ---------------------------------------------
   .encart vient de waldec-v7.css, ou il est vertical parce qu'il vit dans une
   colonne de 320px. En pleine largeur il se couche : titre a gauche, bouton a
   droite. */

.v7.produit .encart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 24px 28px;
}
.v7.produit .encart h2 { flex: 1 1 auto; }
.v7.produit .encart .bouton-primaire {
    flex: 0 0 auto;
    margin-top: 0;
    padding-inline: 28px;
}

@media (max-width: 640px) {
    .v7.produit .encart .bouton-primaire { flex-basis: 100%; }
}

/* =============================================================================
   Passe 2 : gabarit d'atterrissage produit

   L'accroche passe sur deux colonnes, texte a gauche et apercu a droite, suivie
   d'etapes numerotees, d'une grille d'atouts et d'une bande cout pleine largeur.
   Le titre centre du bloc precedent reste utilise par la page tarifs ; ici il
   est realigne a gauche par les regles ci-dessous.
   ============================================================================= */

/* --- Accroche sur deux colonnes -----------------------------------------------
   base-v7.css fait de .v7 une grille dont tout enfant direct autre que main et
   aside traverse les colonnes. Ici la racine EST un main, donc ses enfants ne
   tombent pas sous cette regle : on redistribue explicitement. Seuls le titre et
   l'apercu se partagent la ligne, tout le reste traverse. */

.v7.produit {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    column-gap: 44px;
    row-gap: 26px;
    align-content: start;
}
.v7.produit > * { grid-column: 1 / -1; }
.v7.produit > .titre-page { grid-column: 1; }
.v7.produit > .apercu { grid-column: 2; }

/* Le titre n'est plus centre : il ouvre une colonne, pas une page. */
.v7.produit > .titre-page {
    align-self: center;
    text-align: left;
    padding: 8px 0 0;
}
.v7.produit > .titre-page h1 {
    text-align: left;
    text-wrap: pretty;
}
.v7.produit > .titre-page .chapeau {
    margin-inline: 0;
    max-width: 34rem;
    text-align: left;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ex-stone-700);
}

/* Bouton d'action et lien secondaire sur la meme ligne : l'un engage, l'autre
   laisse regarder avant de s'engager. */
.v7.produit .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 26px;
}
.v7.produit .actions .bouton-primaire {
    padding: 13px 26px;
    font-size: 15px;
}
.v7.produit .actions .lien-action { font-size: 14px; font-weight: 600; }

/* Ligne de preuves : trois affirmations courtes, en mono pour les detacher de la
   prose. Le filet du dessus les rattache a l'action plutot qu'au paragraphe. */
.v7.produit .preuves {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 0;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ex-stone-200);
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
/* Le separateur est dessine, pas ecrit : rien a maintenir dans le markup, et il
   disparait de la selection comme de la synthese vocale. */
.v7.produit .preuves li + li::before {
    content: '/';
    margin: 0 12px;
    color: var(--ex-stone-300);
}

/* --- Apercu -------------------------------------------------------------------
   Une carte qui montre le resultat. Contenu illustratif, pas des donnees : les
   noms sont des exemples, assumés comme tels par l'etiquette "Apercu". */

.v7.produit .apercu {
    align-self: center;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 14px;
    box-shadow: var(--ex-shadow-sm);
    overflow: hidden;
}

.v7.produit .apercu > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 12px;
    padding: 16px 20px 14px;
}
.v7.produit .apercu > header h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ex-stone-900);
}
.v7.produit .apercu > header .meta { font-size: 13px; color: var(--ex-stone-500); }
/* L'etiquette occupe la deuxieme colonne sur les deux lignes du titre. */
.v7.produit .apercu > header .etiquette {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--ex-stone-100);
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}

/* Fond de carte decoratif : quadrillage et marqueurs sont peints en CSS. Aucun
   marqueur en markup, ce ne sont pas des donnees et un lecteur d'ecran n'aurait
   rien a en faire. */
.v7.produit .apercu-carte {
    position: relative;
    height: 210px;
    background-color: var(--ex-amber-50);
    background-image:
        radial-gradient(circle at 26% 34%, var(--ex-amber-400) 0 5px, transparent 5px),
        radial-gradient(circle at 47% 22%, var(--ex-amber-400) 0 5px, transparent 5px),
        radial-gradient(circle at 40% 56%, var(--ex-amber-400) 0 5px, transparent 5px),
        radial-gradient(circle at 58% 38%, var(--ex-amber-400) 0 5px, transparent 5px),
        radial-gradient(circle at 79% 50%, var(--ex-amber-400) 0 5px, transparent 5px),
        radial-gradient(circle at 63% 66%, var(--ex-indigo-700) 0 5px, transparent 5px),
        linear-gradient(var(--ex-amber-100) 1px, transparent 1px),
        linear-gradient(90deg, var(--ex-amber-100) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, auto, auto, 34px 34px, 34px 34px;
    border-block: 1px solid var(--ex-stone-200);
}

.v7.produit .apercu-carte .legende {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 6px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ex-surface) 88%, transparent);
    font-size: 12px;
    color: var(--ex-stone-700);
}
.v7.produit .legende li { display: flex; align-items: center; gap: 6px; }
.v7.produit .legende li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ex-stone-300);
}
.v7.produit .legende li[data-type="association"]::before { background: var(--ex-amber-400); }
.v7.produit .legende li[data-type="collectivite"]::before { background: var(--ex-rose-700); }
.v7.produit .legende li[data-type="entreprise"]::before { background: var(--ex-indigo-700); }

/* Liste d'exemples : nom a gauche, precision a droite. */
.v7.produit .apercu-liste > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    font-size: 14px;
}
.v7.produit .apercu-liste > li + li { border-top: 1px solid var(--ex-stone-100); }
.v7.produit .apercu-liste .nom { color: var(--ex-link); font-weight: 500; }
.v7.produit .apercu-liste .detail { flex-shrink: 0; color: var(--ex-stone-500); }

/* --- Etapes -------------------------------------------------------------------
   Une liste ordonnee, donc numerotee par un compteur CSS : le rang est de la
   presentation, il n'a pas a etre ecrit dans le markup ou il faudrait le
   renumeroter a chaque insertion. */

.v7.produit .etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    counter-reset: etape;
}
.v7.produit .etapes > li {
    counter-increment: etape;
    padding: 18px 22px 20px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
    box-shadow: var(--ex-shadow-sm);
}
.v7.produit .etape-cle {
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-titre);
}
.v7.produit .etape-cle::before {
    content: counter(etape, decimal-leading-zero) '  \2014  ';
    color: var(--ex-stone-400);
    white-space: pre;
}
.v7.produit .etapes h3 {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ex-stone-900);
}
.v7.produit .etapes .prose { margin-top: 8px; font-size: 14px; line-height: 1.65; }

/* --- Grille d'atouts ----------------------------------------------------------
   Trois colonnes dans une carte a en-tete. Le terme porte la promesse, la
   definition la precise : c'est une liste de definitions, pas trois titres. */

/* Chaque colonne porte une paire terme / definition, donc le remplissage se fait
   colonne par colonne : deux lignes fixes, et grid-auto-flow envoie le dt en
   ligne 1 puis son dd en ligne 2 avant de passer a la colonne suivante.

   En remplissage par lignes, comportement par defaut, les dt et les dd
   s'alternaient dans une meme rangee : le premier terme se retrouvait a cote de
   sa propre definition, et la troisieme paire repartait sous la premiere. */
.v7.produit .atouts > dl {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto 1fr;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
}
.v7.produit .atouts dt {
    padding: 18px 22px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ex-stone-900);
}
.v7.produit .atouts dd {
    padding: 6px 22px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ex-stone-700);
}
/* Filet entre colonnes, pose sur le terme et sa definition pour couvrir toute la
   hauteur de la cellule. */
.v7.produit .atouts dt:not(:first-of-type),
.v7.produit .atouts dt:not(:first-of-type) + dd {
    border-left: 1px solid var(--ex-stone-100);
}

/* --- Bande cout ---------------------------------------------------------------
   Pleine largeur, hors de .v7 : c'est un enfant direct de body, comme la
   banniere de l'accueil. Elle reste sombre dans les deux themes, donc elle
   declare ses propres neutres, exactement comme .pied. */

.bande-cout {
    --cout-fond: #1c1917;
    --cout-texte: #e7e5e4;
    --cout-attenue: #a8a29e;
    --cout-filet: rgba(255, 255, 255, .22);

    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 28px;
    padding: 26px max(28px, calc((100% - 1440px) / 2 + 28px));
    background: var(--cout-fond);
    font-family: var(--ex-font);
    color: var(--cout-texte);
}

.bande-cout h2 {
    margin: 0;
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-amber-400);
    text-align: left;
}
.bande-cout p { margin: 0; font-size: 16px; line-height: 1.55; }
/* Seconde ligne facultative : une precision qui ne doit pas peser autant que la
   phrase principale. */
.bande-cout .nuance { grid-column: 2; font-size: 14px; color: var(--cout-attenue); }

.bande-cout .vers-tarifs { grid-row: 1 / -1; grid-column: 3; }
.bande-cout .vers-tarifs a {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--cout-filet);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cout-texte);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s var(--ex-ease), border-color .15s var(--ex-ease);
}
.bande-cout .vers-tarifs a:hover {
    background: rgba(255, 255, 255, .10);
    border-color: var(--cout-texte);
}

/* --- Responsive ---------------------------------------------------------------- */

@media (max-width: 960px) {
    /* L'apercu passe sous l'accroche : en dessous de cette largeur, deux colonnes
       laissent trop peu de place au titre pour qu'il reste une accroche. */
    .v7.produit { grid-template-columns: minmax(0, 1fr); }
    .v7.produit > .titre-page,
    .v7.produit > .apercu { grid-column: 1 / -1; }

    .bande-cout {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 22px 18px;
    }
    .bande-cout .nuance,
    .bande-cout .vers-tarifs { grid-column: 1; grid-row: auto; }
    .bande-cout .vers-tarifs { margin-top: 8px; }
}

@media (max-width: 640px) {
    .v7.produit > .titre-page { padding-top: 4px; }
    .v7.produit .preuves { margin-top: 20px; padding-top: 16px; }
    .v7.produit .apercu-carte { height: 170px; }
    /* Retour au remplissage par lignes : une paire par ligne, empilee. */
    .v7.produit .atouts > dl {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr);
    }
    .v7.produit .atouts dt:not(:first-of-type),
    .v7.produit .atouts dt:not(:first-of-type) + dd { border-left: 0; }
    .v7.produit .atouts dt:not(:first-of-type) { border-top: 1px solid var(--ex-stone-100); }
}

/* --- Jalons du depot (page annonce) -------------------------------------------
   Suite d'etapes en pastilles, numerotee par compteur comme .etapes. La fleche
   entre deux jalons est dessinee, pas ecrite : elle n'a rien a dire a voix
   haute, et le dernier jalon ne doit pas en porter. */

.v7.produit .etapes-titre {
    margin-top: 26px;
    font-family: var(--ex-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}

.v7.produit .jalons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
    margin-top: 12px;
    counter-reset: jalon;
}
.v7.produit .jalons > li {
    counter-increment: jalon;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    background: var(--ex-surface);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ex-stone-800);
}
.v7.produit .jalons > li::before {
    content: counter(jalon, decimal-leading-zero);
    font-family: var(--ex-mono);
    font-size: 11px;
    color: var(--ex-amber-700);
}
.v7.produit .jalons > li:not(:last-child)::after {
    content: '\2192';
    margin: 0 -4px 0 12px;
    padding-left: 14px;
    font-family: var(--ex-mono);
    color: var(--ex-stone-300);
}

/* --- Liste ordonnee dans une carte d'atouts (page annonce) --------------------
   Les cinq points de diffusion sont un rang, pas une definition : liste
   numerotee sur une colonne, le numero en mono a gauche. */

.v7.produit .ou-elle-parait > ol {
    display: grid;
    padding: 6px 22px 18px;
    counter-reset: parution;
}
/* Retrait plus pseudo-element positionne, et non une grille : le contenu du li
   melange du texte et un lien, or chaque enfant d'une grille devient une cellule.
   Les noeuds texte et le <a> se repartissaient donc dans des colonnes separees,
   ce qui disloquait la phrase des qu'elle contenait un lien. */
.v7.produit .ou-elle-parait > ol > li {
    counter-increment: parution;
    position: relative;
    padding: 12px 0 12px 34px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ex-stone-800);
}
.v7.produit .ou-elle-parait > ol > li + li { border-top: 1px solid var(--ex-stone-100); }
.v7.produit .ou-elle-parait > ol > li::before {
    content: counter(parution, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--ex-mono);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ex-stone-400);
}

/* --- Apercu d'une annonce ------------------------------------------------------ */

/* Zone reservee au visuel : elle dit son role plutot que de simuler une image
   qu'on n'a pas. */
.v7.produit .apercu-visuel {
    display: grid;
    place-items: center;
    height: 120px;
    background: var(--ex-amber-50);
    border-block: 1px solid var(--ex-stone-200);
    font-family: var(--ex-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-stone-400);
}

.v7.produit .apercu-attributs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px 0;
}
.v7.produit .apercu-attributs > li {
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--ex-stone-100);
    font-size: 13px;
    color: var(--ex-stone-700);
}

.v7.produit .apercu-pied {
    margin: 14px 20px 0;
    padding: 13px 0 16px;
    border-top: 1px solid var(--ex-stone-100);
    font-size: 13px;
    color: var(--ex-stone-500);
}
.v7.produit .apercu-pied .nom { color: var(--ex-link); font-weight: 500; }

/* --- Apercu d'un encart partenaires ------------------------------------------- */

.v7.produit .apercu-partenaires { padding: 4px 20px 16px; }
.v7.produit .apercu-partenaires dt {
    margin-top: 14px;
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-amber-700);
}
.v7.produit .apercu-partenaires dt:first-of-type { margin-top: 6px; }
.v7.produit .apercu-partenaires dd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
    font-size: 14px;
}
.v7.produit .apercu-partenaires .nom { color: var(--ex-link); font-weight: 500; }
.v7.produit .apercu-partenaires .detail { flex-shrink: 0; color: var(--ex-stone-500); font-size: 13px; }

/* L'appel est ce que la page vend : c'est le seul bloc accentue de l'apercu. */
.v7.produit .apercu-appel {
    margin: 4px 16px 16px;
    padding: 14px 16px;
    border: 1px solid var(--ex-amber-200);
    border-radius: 10px;
    background: var(--ex-amber-50);
}
.v7.produit .apercu-appel h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ex-amber-900);
}
.v7.produit .apercu-appel p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ex-amber-700);
}
/* Faux bouton : l'apercu montre l'interface, il ne la rend pas cliquable. Un
   vrai <button> promettrait une action inexistante ici. */
.v7.produit .apercu-appel .faux-bouton {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--ex-amber-400);
    color: var(--ex-text-on-accent);
    font-size: 13px;
    font-weight: 700;
}

/* --- En-tete de carte a mention laterale --------------------------------------
   .renseigne vient de organisation-v7.css, ou il nomme la source d'un contenu.
   Ici il porte une precision de meme nature : secondaire, alignee a droite. */

.v7.produit .carte-bloc > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 9px 22px;
    background: var(--ex-stone-50);
    border-bottom: 1px solid var(--ex-stone-200);
}
.v7.produit .carte-bloc > header .renseigne { font-size: 12.5px; color: var(--ex-stone-500); }

/* --- Jetons de valeurs (page partenariat) ------------------------------------- */

.v7.produit .jetons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.v7.produit .jetons > li {
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--ex-stone-100);
    font-size: 13px;
    color: var(--ex-stone-700);
}

/* Deux voies et non trois etapes : la grille ne doit pas les etirer. */
.v7.produit .voies { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 640px) {
    .v7.produit .apercu-visuel { height: 96px; }
    .v7.produit .carte-bloc > header { padding: 9px 18px; }
    .v7.produit .ou-elle-parait > ol { padding: 4px 18px 14px; }
    /* La fleche entre jalons saute : sur une colonne elle pointerait vers le bas
       en dessinant une droite. */
    .v7.produit .jalons > li:not(:last-child)::after { content: none; }
}

/* --- Badges d'apercu -----------------------------------------------------------
   Les badges de la carte d'identite d'une fiche, repris dans l'apercu. Le type
   suit l'accent de la page, le lieu et l'etat gardent leurs couleurs propres :
   ce sont des informations de nature differente, elles ne doivent pas se
   confondre avec l'identite du type. */

.v7.produit .apercu-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 20px 4px;
    font-size: 11.5px;
    font-weight: 600;
}
.v7.produit .apercu-badges > li {
    padding: 4px 10px;
    border-radius: 5px;
    white-space: nowrap;
    background: var(--ex-stone-100);
    color: var(--ex-stone-600);
}
.v7.produit .apercu-badges > li[data-badge="type"] {
    background: var(--accent-badge-fond);
    color: var(--accent-badge-texte);
}
.v7.produit .apercu-badges > li[data-badge="lieu"] {
    background: var(--ex-indigo-100);
    color: var(--ex-indigo-700);
}
.v7.produit .apercu-badges > li[data-badge="inscrite"] {
    background: var(--ex-green-100);
    color: var(--ex-green-900);
}

/* --- Ce que la revendication ajoute (page association) -------------------------
   Meme ligne nom / precision que les autres apercus, mais en liste de
   definitions : le terme nomme le champ, la definition dit ce qu'on y met. */

.v7.produit .apercu-ajouts { padding: 10px 20px 16px; }
.v7.produit .apercu-ajouts dt {
    margin-top: 14px;
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-titre);
}
.v7.produit .apercu-ajouts dt:first-of-type { margin-top: 4px; }
.v7.produit .apercu-ajouts dd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 14px;
}
.v7.produit .apercu-ajouts .nom { color: var(--ex-stone-800); }
.v7.produit .apercu-ajouts .detail { flex-shrink: 0; font-size: 13px; color: var(--ex-stone-500); }

/* --- Canaux de contact d'un apercu (pages entreprise et collectivite) ----------
   Reprend la forme des canaux de fiche, masquage compris : c'est precisement
   l'argument de ces deux pages, il doit se voir. */

.v7.produit .apercu-canaux { padding: 12px 20px 4px; display: grid; gap: 8px; }
.v7.produit .apercu-canaux > li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    background: var(--ex-stone-50);
    font-size: 13.5px;
}
.v7.produit .apercu-canaux .cle {
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
.v7.produit .apercu-canaux .nom { color: var(--ex-link); font-weight: 500; }
/* Canal masque : trait pointille et pas de fond, comme sur la fiche. */
.v7.produit .apercu-canaux > li[data-masque] {
    border-style: dashed;
    border-color: var(--ex-stone-300);
    background: none;
}
.v7.produit .apercu-canaux .points { letter-spacing: .12em; font-size: 11px; color: var(--ex-stone-500); }
.v7.produit .apercu-canaux .detail {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-titre);
}

/* --- Bascule du lien vers un champ de recherche ---------------------------------
   Le lien et le formulaire occupent le meme emplacement dans .actions : l'un
   sort, l'autre entre, sans que le bouton voisin ne bouge.

   Le lien s'efface en glissant vers la gauche, le champ arrive de la droite : le
   mouvement raconte un remplacement, pas une apparition. C'est le seul indice
   qu'a l'utilisateur pour comprendre que c'est bien la qu'il doit taper. */

.v7.produit .actions {
    /* .actions passe de <p> a <div> sur la page association, qui y loge un
       formulaire : un <p> ne peut pas contenir de contenu de flux. Les autres
       pages produit gardent le <p>, la regle ne depend pas de l'element. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 26px;
}

.v7.produit .bascule-recherche {
    transition: opacity .2s var(--ex-ease), transform .2s var(--ex-ease);
}
.v7.produit .bascule-recherche.parti {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}

.v7.produit .recherche-produit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 16px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-300);
    border-radius: 99px;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .26s var(--ex-ease), transform .26s var(--ex-ease), box-shadow .15s var(--ex-ease);
}
.v7.produit .recherche-produit.visible {
    opacity: 1;
    transform: none;
    /* Halo d'accent une seule fois a l'arrivee : il dit « c'est ici », puis
       s'efface pour ne pas rester un element criard sur la page. */
    animation: produit-halo 1.1s var(--ex-ease) 1;
}
.v7.produit .recherche-produit:focus-within {
    border-color: var(--accent-clair);
    box-shadow: var(--ex-focus-ring);
    animation: none;
}
.v7.produit .recherche-produit.en-cours { opacity: .6; }

@keyframes produit-halo {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-clair) 70%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-clair) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-clair) 0%, transparent); }
}

.v7.produit .recherche-produit::before {
    content: '\2315';
    color: var(--ex-stone-500);
    font-size: 14px;
    line-height: 1;
}
.v7.produit .recherche-produit input {
    flex: 1;
    min-width: 13rem;
    border: 0;
    padding: 0;
    background: none;
    font-family: var(--ex-font);
    font-size: 14px;
    color: var(--ex-stone-800);
}
.v7.produit .recherche-produit input:focus { outline: none; }
.v7.produit .recherche-produit input::placeholder { color: var(--ex-stone-500); }
.v7.produit .recherche-produit input::-webkit-search-cancel-button { display: none; }

.v7.produit .recherche-produit button {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 99px;
    background: var(--ex-amber-400);
    color: var(--ex-text-on-accent);
    font-family: var(--ex-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s var(--ex-ease);
}
.v7.produit .recherche-produit button:hover { background: var(--ex-accent); }

/* Aucun mouvement pour qui n'en veut pas : la bascule reste instantanee, et le
   halo disparait. Le module saute alors aussi l'attente d'une image. */
@media (prefers-reduced-motion: reduce) {
    .v7.produit .bascule-recherche,
    .v7.produit .recherche-produit { transition: none; }
    .v7.produit .bascule-recherche.parti { transform: none; }
    .v7.produit .recherche-produit { transform: none; }
    .v7.produit .recherche-produit.visible { animation: none; }
}

@media (max-width: 640px) {
    .v7.produit .recherche-produit { width: 100%; }
    .v7.produit .recherche-produit input { min-width: 0; }
}