/* EOCHE v2 : page Consultant SEO a Vitre (groupe consultant-seo-vitre).
   Doctrine « sur mesure » du 23/09/2026 : cartes blanches a ombre douce sur fond clair,
   phrases completes, preuves reelles, aucun decor anime en dehors du monogramme commun.
   Complete eoche.v2.css sans la modifier. Toutes les classes sont prefixees csv-.
   Aucun JavaScript propre : les apparitions passent par data-reveal et data-stagger.
   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 sur la page, plus de scene noire en milieu de page.
   Deux scenes noires seulement, la premiere vue et l'appel final. */

.page-consultant-seo { --csv-texte: #3F3F46; }
/* Titres de cartes (h3) : 22 px au telephone, comme l'echelle commune, un peu plus sur grand ecran. */
:where(.csv-carte__titre, .csv-levier__titre, .csv-local__titre, .csv-registre__titre, .csv-suite__titre, .csv-garantie__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(.csv-carte__texte, .csv-levier__texte, .csv-local__phrase, .csv-local__suite, .csv-registre__texte, .csv-garantie__texte, .csv-releve__suite) { font-size: 18px; }
}
/* Liens pris dans une phrase : rouge profond souligne, zone de toucher agrandie sans changer la ligne. */
.csv-local__suite a, .csv-suite .csv-carte__texte a, .csv-avis__note a {
  padding-block: 10px;
  color: var(--rouge-profond);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.csv-local__suite a:hover, .csv-suite .csv-carte__texte a:hover, .csv-avis__note a:hover { text-decoration-thickness: 2px; }
.page-consultant-seo .faq__reponse a { padding-block: 10px; }

/* ══════════════════════════════════════════════════════════════════
   CARTES BLANCHES EN RELIEF
   ══════════════════════════════════════════════════════════════════ */
.csv-cartes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.csv-carte {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 28px 26px 30px;
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
}
.csv-carte__titre { line-height: 1.2; letter-spacing: -0.02em; }
.csv-carte__texte { line-height: 1.55; color: var(--csv-texte); }

/* ══════════════════════════════════════════════════════════════════
   LE RELEVE DES 751 SITES : une phrase, le chiffre dedans, les deux autres chiffres dessous
   ══════════════════════════════════════════════════════════════════ */
.csv-releve {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "texte bouton";
  align-items: center;
  gap: 14px clamp(28px, 5vw, 72px);
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
}
.csv-releve__texte { grid-area: texte; display: grid; gap: 14px; }
.csv-releve__phrase {
  max-width: 38ch;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--texte-clair);
}
.csv-releve__phrase b { font-weight: 700; color: var(--rouge-profond); }
.csv-releve__suite { max-width: 60ch; line-height: 1.55; color: var(--csv-texte); }
.csv-insecable { white-space: nowrap; }
.csv-releve__bouton { grid-area: bouton; }

/* ══════════════════════════════════════════════════════════════════
   SEO LOCAL : trois leviers, et nos propres pages locales en preuve
   ══════════════════════════════════════════════════════════════════ */
.csv-local__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}
.csv-local .tete-section { margin-bottom: clamp(28px, 4vw, 44px); }
.csv-leviers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.csv-levier { padding: 22px 0; border-bottom: 1px solid var(--ligne-claire); }
.csv-levier__titre { line-height: 1.25; letter-spacing: -0.015em; }
.csv-levier__texte { margin-top: 4px; line-height: 1.55; color: var(--csv-texte); }
.csv-local__suite { max-width: 60ch; margin-top: 24px; line-height: 1.6; color: var(--csv-texte); }

.csv-local__preuve {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-xl);
  background: var(--clair);
  border: 1px solid var(--ligne-claire);
}
/* Le dessin est coupe net sur ses bords : un fondu les adoucit dans la carte. */
.csv-local__chateau {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: -4px 0 22px;
  filter: invert(1);
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.csv-local__titre { line-height: 1.2; letter-spacing: -0.02em; }
.csv-local__phrase { margin-top: 10px; line-height: 1.65; color: var(--csv-texte); }
/* Nos cinq pages locales : de vrais liens, deux colonnes, 44 px de haut chacun */
.csv-villes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.csv-villes li { border-top: 1px solid var(--ligne-claire); }
.csv-villes .lien-fleche { width: 100%; justify-content: space-between; font-size: 17px; color: var(--texte-clair); }

/* ══════════════════════════════════════════════════════════════════
   CINQ LIVRABLES : le titre reste en place, la liste defile.
   Aucun numero : un filet entre les lignes suffit.
   ══════════════════════════════════════════════════════════════════ */
.csv-livrables__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}
.csv-livrables__tete { position: sticky; top: 120px; }
.csv-livrables__tete .tete-section { margin-bottom: 28px; }
/* role=list remet le padding a zero dans la feuille commune : on le reprend ici. */
.csv-registre,
.csv-registre[role="list"] {
  margin: 0;
  padding: 6px clamp(22px, 3vw, 38px);
  list-style: none;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
}
.csv-registre__ligne { padding: 24px 0; }
.csv-registre__ligne + .csv-registre__ligne { border-top: 1px solid var(--ligne-claire); }
.csv-registre__titre { line-height: 1.25; letter-spacing: -0.015em; }
.csv-registre__texte { margin-top: 4px; line-height: 1.55; color: var(--csv-texte); }

/* ══════════════════════════════════════════════════════════════════
   CE QUE NOUS GARANTISSONS : section claire qui prolonge les livrables,
   trois engagements separes par un filet, puis la phrase signee de Baptiste.
   ══════════════════════════════════════════════════════════════════ */
.page-consultant-seo .csv-engagement { padding-top: 0; }
.csv-engagement__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.csv-engagement__texte { display: grid; gap: clamp(28px, 4vw, 44px); }
.csv-garanties { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.csv-garantie { padding: 22px 0; border-bottom: 1px solid var(--ligne-claire); }
.csv-garantie__titre { line-height: 1.25; letter-spacing: -0.015em; }
.csv-garantie__texte { max-width: 52ch; margin-top: 4px; line-height: 1.55; color: var(--csv-texte); }
.csv-citation {
  margin: 0;
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
}
.csv-citation blockquote p { font-size: clamp(22px, 2.1vw, 29px); font-weight: 500; line-height: 1.38; letter-spacing: -0.015em; color: var(--texte-clair); }
.csv-citation figcaption { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.csv-citation__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(9, 9, 11, 0.08); }
.csv-citation__nom { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; color: var(--texte-clair-2); }
.csv-citation__nom b { font-size: 16px; font-weight: 700; color: var(--texte-clair); }

/* ══════════════════════════════════════════════════════════════════
   DEROULE ET AVIS
   ══════════════════════════════════════════════════════════════════ */
/* La frise commune (cercles noirs), en trois temps au lieu de quatre : titres et textes a l'echelle commune. */
.csv-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* L'avis est centre sous la frise : il clot la section au lieu de laisser un vide a droite. */
.csv-avis { display: grid; justify-items: center; gap: 18px; margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.csv-avis .avis-vedette { justify-items: center; max-width: 820px; }
.csv-avis__note { max-width: 62ch; line-height: 1.55; color: var(--csv-texte); }

/* ══════════════════════════════════════════════════════════════════
   APRES L'AUDIT
   ══════════════════════════════════════════════════════════════════ */
.csv-suites { padding-bottom: 0; }
.csv-suites__cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.csv-suite { gap: 12px; padding: clamp(26px, 3vw, 38px); }
.csv-suite__titre { line-height: 1.15; letter-spacing: -0.025em; }
.csv-suite .lien-fleche { margin-top: 4px; color: var(--texte-clair); }

/* ══════════════════════════════════════════════════════════════════
   TABLETTE ET TELEPHONE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .csv-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csv-releve { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "bouton"; justify-items: start; }
  .csv-releve__bouton { margin-top: 8px; }
  .csv-local__grille,
  .csv-livrables__grille,
  .csv-engagement__grille { grid-template-columns: minmax(0, 1fr); }
  /* Sur tablette et telephone, le bouton passe sous la liste des cinq livrables. */
  .csv-livrables__grille { gap: 0; }
  .csv-livrables__tete { display: contents; }
  .csv-registre { order: 1; }
  .csv-livrables__action { order: 2; margin-top: 24px; }
  .csv-citation { max-width: 640px; }
  .csv-etapes { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 767px) {
  /* Sur telephone, les quatre controles tiennent dans une seule carte, separes par un filet. */
  .csv-cartes,
  .csv-cartes[role="list"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 2px 20px;
    border-radius: var(--r-l);
    background: #fff;
    border: 1px solid var(--ligne-claire);
    box-shadow: var(--ombre-claire);
  }
  .csv-cartes .csv-carte { gap: 4px; padding: 18px 0 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .csv-cartes .csv-carte + .csv-carte { border-top: 1px solid var(--ligne-claire); }
  .csv-carte { padding: 22px 20px 24px; }
  .csv-avis { justify-items: start; text-align: left; }
  .csv-avis .avis-vedette { justify-items: start; }
  .csv-releve { padding: 24px 20px; border-radius: var(--r-l); }
  .csv-releve__bouton,
  .csv-livrables__action .bouton { width: 100%; }
  .csv-levier, .csv-garantie { padding: 18px 0; }
  .csv-local__preuve { padding: 22px 20px; border-radius: var(--r-l); }
  .csv-registre, .csv-registre[role="list"] { padding: 4px 20px; border-radius: var(--r-l); }
  .csv-registre__ligne { padding: 20px 0; }
  .csv-citation { padding: 24px 20px; border-radius: var(--r-l); }
  .csv-citation figcaption { margin-top: 20px; }
  .csv-citation__photo { width: 56px; height: 56px; }
  .csv-suites__cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .csv-suite { padding: 22px 20px 24px; }
  .csv-avis .avis-vedette { padding: 22px 20px; }
}