/* Feuille des pages éditoriales (/fr/packshot-produit/ et suivantes).
 *
 * ⚠ ELLE COMPLÈTE style.css, ELLE NE LE REMPLACE PAS. Les variables de couleur,
 * les polices, l'en-tête, le pied et les boutons viennent de là. Ici on ne
 * décrit QUE ce qu'une page de texte long ajoute : mesure de lecture, titres
 * hiérarchisés, tableau, FAQ dépliante.
 *
 * ⚠ LA MESURE EST VOLONTAIREMENT ÉTROITE (68 caractères). Une page vitrine
 * s'étale, un texte se lit. Au-delà de ~75 caractères par ligne, l'œil perd le
 * début de la ligne suivante — et cette page est faite pour être lue jusqu'au
 * bout, c'est même sa seule raison d'exister.
 */

.article {
  padding: 132px 0 96px;
  background: var(--black);
}

.article-wrap {
  max-width: 720px;
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */
.fil {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 28px;
  letter-spacing: .02em;
}
.fil a { color: var(--silver); text-decoration: none; }
.fil a:hover { color: var(--off-white); }
.fil span[aria-hidden] { margin: 0 6px; opacity: .5; }

/* ── Titres ─────────────────────────────────────────────────────────────── */
.article h1 {
  font-family: var(--ff-display);
  font-size: clamp(38px, 6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0 0 22px;
}
.article .chapeau {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--silver);
  margin: 0 0 52px;
}
.article h2 {
  font-family: var(--ff-head);
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 56px 0 18px;
}
.article h3 {
  font-family: var(--ff-head);
  font-size: 16.5px;
  color: var(--off-white);
  margin: 0;
  display: inline;
}

/* ── Corps ──────────────────────────────────────────────────────────────── */
.article p,
.article li {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--silver);
}
.article p { margin: 0 0 18px; }
.article strong { color: var(--off-white); font-weight: 600; }
.article a { color: var(--off-white); text-decoration: underline; text-underline-offset: 3px; }
.article a:hover { color: var(--white); }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 10px; }
.article li::marker { color: var(--gray); }

/* ── Tableau des tarifs ─────────────────────────────────────────────────── */
/* ⚠ Enveloppé dans son propre défilement horizontal : sur mobile un tableau à
   trois colonnes déborde, et c'est la PAGE qui se met à défiler latéralement
   si on ne le contient pas. */
.tarifs {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0 22px;
  font-size: 15px;
}
.tarifs caption {
  caption-side: top;
  text-align: left;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
  padding-bottom: 12px;
}
.tarifs th, .tarifs td {
  border-bottom: 1px solid var(--border);
  padding: 13px 16px 13px 0;
  text-align: left;
  vertical-align: top;
  color: var(--silver);
}
.tarifs thead th {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
  border-bottom-color: var(--border-strong);
}
.tarifs tbody th { color: var(--off-white); font-weight: 500; min-width: 190px; }
.tarifs td strong { white-space: nowrap; }

/* ── Exemples ───────────────────────────────────────────────────────────── */
.exemples { margin: 34px 0 26px; }
.exemples-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.exemples-grille img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.exemples figcaption {
  font-size: 13px;
  color: var(--gray);
  margin-top: 12px;
  line-height: 1.55;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { margin-top: 8px; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 30px 16px 0;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  font-size: 19px;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover h3 { color: var(--white); }
.faq-item p { padding: 0 0 18px; margin: 0; }

/* ── Appel à l'action ───────────────────────────────────────────────────── */
.cta-bloc {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px 0 8px;
}
.cta-note { font-size: 13.5px; color: var(--gray); }
.retour { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border); }

@media (max-width: 620px) {
  .article { padding: 108px 0 72px; }
  .exemples-grille { grid-template-columns: 1fr 1fr; }
  .exemples-grille img:nth-child(3) { display: none; }
}

/* ── Bloc « Guides » de la page d'accueil française ─────────────────────────
 * ⚠ Il vit dans article.css alors qu'il s'affiche sur l'accueil : c'est le
 * seul endroit de style.css qui ne concerne QUE le français, et le mélanger
 * au reste rendrait la feuille commune dépendante d'une décision de langue.
 * L'accueil française charge donc les deux feuilles.
 */
.guides-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.guide-carte {
  display: block;
  padding: 26px 24px 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.guide-carte:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.guide-carte h3 {
  font-family: var(--ff-head);
  font-size: 17px;
  color: var(--off-white);
  margin: 0 0 10px;
  display: block;
}
.guide-carte p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}
@media (max-width: 860px) { .guides-grille { grid-template-columns: 1fr; } }

/* ── Blocs de conversion de la page d'accueil française ────────────────────
 * ⚠ `.article h3` NE S'APPLIQUE PAS ICI. Les titres de la FAQ sont stylés dans
 * article.css sous `.article h3`, or l'accueil n'a pas de conteneur .article :
 * sans la règle ci-dessous, les questions ressortaient en h3 par défaut du
 * navigateur — grosses, grasses, et sur leur propre ligne, ce qui cassait le
 * chevron d'ouverture. Défaut invisible dans le HTML, visible seulement à
 * l'écran.
 */
.faq-landing h3,
.faq-landing .faq-item summary h3 {
  font-family: var(--ff-head);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--off-white);
  margin: 0;
  display: inline;
}
.faq-landing .faq-item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--silver);
  padding: 0 0 18px;
  margin: 0;
}
.faq-landing .faq { max-width: 720px; margin-top: 30px; }

/* Rappel d'appel à l'action, posé juste après la galerie d'exemples */
.rappel-cta {
  padding: 4px 0 64px;
  text-align: center;
}
.rappel-texte {
  font-size: 17px;
  color: var(--silver);
  margin: 0 0 22px;
  line-height: 1.6;
}
.rappel-cta .cta-bloc { justify-content: center; }

/* Grille tarifaire réelle */
.grille-tarifs {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0 18px;
  font-size: 15px;
}
.grille-tarifs th,
.grille-tarifs td {
  border-bottom: 1px solid var(--border);
  padding: 18px 20px 18px 0;
  text-align: left;
  vertical-align: top;
  color: var(--silver);
}
.grille-tarifs thead th {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
  border-bottom-color: var(--border-strong);
  padding-bottom: 12px;
}
.grille-tarifs tbody th {
  color: var(--off-white);
  font-weight: 600;
  font-size: 16px;
  min-width: 180px;
}
.tarif-tagline {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--gray);
  margin-top: 4px;
}
.tarif-prix { white-space: nowrap; }
.tarif-prix s { color: var(--gray); font-size: 13px; margin-right: 5px; }
.tarif-prix strong { color: var(--white); font-size: 19px; }
.tarif-mois { color: var(--gray); font-size: 13px; }
.tarif-detail { display: block; font-size: 13px; color: var(--gray); margin-top: 4px; }
.tarif-essai {
  display: inline-block;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  color: var(--off-white);
  white-space: nowrap;
}
.tarif-essai-non { color: var(--gray); border-color: var(--border); }
.tarifs-note {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 26px;
}

@media (max-width: 620px) {
  .grille-tarifs tbody th { min-width: 150px; }
  .rappel-cta { padding-bottom: 44px; }
}

/* ── Schéma technique et exemple isolé ─────────────────────────────────────── */
.schema { margin: 28px 0 26px; }
.schema img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}
.schema figcaption {
  font-size: 13px;
  color: var(--gray);
  margin-top: 11px;
  line-height: 1.55;
}
/* ⚠ Un flyer est en portrait très allongé : à pleine largeur il occuperait
   trois écrans. On le borne en HAUTEUR, pas en largeur. */
.exemple-unique { text-align: center; }
.exemple-unique img {
  max-height: 620px;
  width: auto;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: inline-block;
}
.exemple-unique figcaption { text-align: center; max-width: 520px; margin: 12px auto 0; }

/* ── Page 404 ──────────────────────────────────────────────────────────────
 * ⚠ Elle ne charge PAS main.js : pas d'en-tête, pas de menu, donc aucun des
 * identifiants que le script cherche. Y ajouter le script rejouerait exactement
 * le défaut corrigé le 21 août — une erreur au chargement qui interrompt tout.
 */
.page-404 { padding-top: 116px; }
.page-404 .article-wrap { max-width: 860px; }
.err-code {
  font-family: var(--ff-display);
  font-size: 86px;
  line-height: 1;
  color: var(--border-strong);
  margin: 0 0 6px;
  letter-spacing: -.02em;
}
.err-liens { margin-top: 40px; }
.err-cta { margin-top: 40px; }