/* Abonnement SEO Croissance (v2, doctrine « sur mesure » du 23/09/2026) : styles propres a /abonnement-croissance/.
   Toutes les classes sont prefixees ac- pour ne jamais toucher aux autres pages.
   Fonds clairs pour lire, cartes blanches en relief, le monogramme comme seul decor anime.
   Aucun script propre et aucune animation propre : le monogramme vient de la brique commune.
   Tailles : le H1, les H2, la frise des etapes, les chapeaux et l'appel final suivent l'echelle commune
   de eoche.v2.css, sans surcharge ici. Les titres de cartes et le texte des blocs propres a la page
   n'ont qu'une taille de repli a specificite nulle (:where), que toute regle commune remplace.
   Premiere vue : la brique commune (titre, un paragraphe, deux boutons), sans reglage propre.
   Passe editoriale du 23/09 (qa3) : plus de texte replie, plus de carte de reserves. La garantie tient
   en une ligne sous les livrables, la reserve sur les positions est dans la FAQ. */

/* ══════════════════════════════════════════════════════════════════
   SECTIONS CLAIRES : un seul fond, des cartes blanches
   ══════════════════════════════════════════════════════════════════ */
.page-abonnement .ac-section { padding-block: clamp(64px, 8vw, 112px); }
.page-abonnement .ac-section + .ac-section { padding-top: 0; }
/* Trois bandes : le constat et les livrables sur fond clair, l'offre sur fond blanc,
   la methode et les questions de nouveau sur fond clair. */
.page-abonnement .ac-section.feuille { padding-top: clamp(80px, 9vw, 128px); }
.page-abonnement .ac-section .tete-section { gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
/* Questions : l'ecart vient deja de la grille commune, comme sur les autres pages. */
.page-abonnement .ac-section.questions .tete-section { margin-bottom: 8px; }

/* Titres de cartes (h3) : 22 px au telephone, comme l'echelle commune, un peu plus sur grand ecran. */
:where(.ac-carte__titre) { font-size: clamp(22px, 1.8vw, 24px); }
/* Texte courant des blocs propres : 17 px herite du corps au telephone, 18 px sur ordinateur. */
@media (min-width: 1024px) {
  :where(.ac-texte, .ac-carte__texte, .ac-garantie, .ac-contact__texte, .ac-ligne, .ac-formules li) { font-size: 18px; }
}

.ac-texte { max-width: 52ch; line-height: 1.65; color: #3F3F46; }
.ac-source { margin-top: 20px; font-size: 15px; line-height: 1.5; color: #5E5E66; }

.ac-carte {
  position: relative;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.06);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 3px 8px -4px rgba(9, 9, 11, 0.06), 0 28px 50px -32px rgba(9, 9, 11, 0.32);
}
.ac-carte__titre { font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; color: var(--texte-clair); }
.ac-carte__texte { margin-top: 10px; line-height: 1.6; color: #3F3F46; }

.ac-cartes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ac-cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ac-ligne { max-width: 72ch; margin-top: 28px; line-height: 1.6; color: #3F3F46; }
.ac-ligne a { color: var(--rouge-profond); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ac-ligne a:hover { text-decoration-thickness: 2px; }

/* ══════════════════════════════════════════════════════════════════
   LE CONSTAT : le texte a gauche, les 751 sites a droite
   ══════════════════════════════════════════════════════════════════ */
.ac-constat__grille { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.ac-constat__texte { display: grid; justify-items: start; gap: 20px; }
.ac-constat__texte .ac-source { margin-top: 0; }
/* Un point par site releve, dans l'ordre de lecture : rouge pour les sites muets (comme sur l'accueil),
   puis gris pour ceux qui ont publie dans l'annee. */
.ac-releve { margin: 0; padding: clamp(20px, 3vw, 36px); }
.ac-nuage { display: block; width: 100%; height: auto; }
.ac-nuage path { fill: none; stroke-width: 6.2; stroke-linecap: round; }
.ac-nuage__muets { stroke: var(--rouge); }
.ac-nuage__actifs { stroke: #CDCDD2; }
.ac-releve__legende { display: grid; gap: 8px; margin-top: 22px; font-size: 16px; line-height: 1.45; color: #3F3F46; }
.ac-releve__legende span { display: flex; align-items: baseline; gap: 10px; }
.ac-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); transform: translateY(1px); }
.ac-point--actif { background: #CDCDD2; }

/* ══════════════════════════════════════════════════════════════════
   LA GARANTIE : une ligne sous les livrables, une coche rouge, rien d'autre
   ══════════════════════════════════════════════════════════════════ */
.ac-garantie { display: flex; align-items: flex-start; gap: 12px; max-width: 72ch; margin-top: 28px; line-height: 1.6; color: #3F3F46; }
.ac-garantie b { font-weight: 650; color: var(--texte-clair); }
.ac-garantie__signe { flex: none; display: inline-flex; margin-top: 3px; color: var(--rouge-profond); }
.ac-garantie__signe svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════════
   L'OFFRE : trois phrases du releve des 26 offres, separees par un filet.
   Aucune formule en couleur, aucune coche : le nom en gras ouvre la phrase.
   ══════════════════════════════════════════════════════════════════ */
.ac-formules { max-width: 62ch; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.ac-formules li { padding: 20px 0; border-bottom: 1px solid var(--ligne-claire); line-height: 1.6; color: #3F3F46; }
.ac-formules b { font-weight: 650; color: var(--texte-clair); }
/* Ordinateur : le titre et sa phrase a gauche, les trois phrases a droite, alignees sur le titre. */
@media (min-width: 1024px) {
  .ac-offre { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(40px, 6vw, 96px); }
  .page-abonnement .ac-offre .tete-section { margin-bottom: 0; }
  .ac-offre .ac-formules { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════
   METHODE : la frise commune (cercles noirs), en trois temps au lieu de quatre
   ══════════════════════════════════════════════════════════════════ */
.ac-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.page-abonnement #methode .ac-ligne { margin-top: clamp(32px, 4vw, 48px); }

/* L'interlocuteur : la vraie photo, une phrase, le telephone */
.ac-contact { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); margin-top: 28px; }
.ac-contact__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(9, 9, 11, 0.08); }
.ac-contact__texte { line-height: 1.6; color: #3F3F46; }
.ac-contact__texte b { color: var(--texte-clair); font-weight: 650; }
.ac-contact__texte a { color: var(--rouge-profond); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Liens pris dans une phrase (y compris dans les reponses de la FAQ) :
   zone de toucher agrandie sans changer la ligne */
.ac-ligne a, .ac-contact__texte a, .page-abonnement .faq__reponse a { padding-block: 10px; }

/* ══════════════════════════════════════════════════════════════════
   TABLETTE ET TELEPHONE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .ac-constat__grille { grid-template-columns: minmax(0, 1fr); }
  /* Le releve garde une taille de lecture, il ne s'etale pas sur toute la tablette. */
  .ac-releve { width: 100%; max-width: 560px; }
  .ac-etapes { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 767px) {
  /* Sur telephone, les quatre livrables tiennent dans une seule carte, separes par un filet. */
  .ac-cartes--2,
  .ac-cartes--2[role="list"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 4px 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(9, 9, 11, 0.06);
    box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 3px 8px -4px rgba(9, 9, 11, 0.06), 0 28px 50px -32px rgba(9, 9, 11, 0.32);
  }
  .ac-cartes--2 .ac-carte { padding: 20px 0 22px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .ac-cartes--2 .ac-carte + .ac-carte { border-top: 1px solid var(--ligne-claire); }
  .ac-cartes--2 .ac-carte__texte { margin-top: 6px; }
  .ac-carte { padding: 22px 20px; border-radius: 20px; }
  .ac-releve { padding: 18px; }
  .ac-formules li { padding: 18px 0; }
  .ac-garantie { margin-top: 24px; }
  .ac-contact { align-items: flex-start; }
  .ac-contact__photo { width: 56px; height: 56px; }
}