/* =============================================================
   AGORA DES MOTS — ANAGRAMMES
   styles/anagrammes-seo.css — section éditoriale SEO sous le jeu.

   Vague 4 / Vague 4.1 (fidélité visuelle au prototype). Chargée au
   niveau du DOCUMENT (via index.html, voir <link> dans <head>),
   PAS dans un Shadow DOM : <section class="anagrammes-seo"> vit en
   DOM clair, après <agora-config-view>/<agora-game-view> (voir
   index.html). Tous les sélecteurs commencent par .anagrammes-seo
   — aucune règle globale (section/h2/img/...) qui pourrait toucher
   le jeu.

   Les design tokens (--agora-*) de config.css/game.css sont
   scopés à :host de leurs Shadow DOM respectifs et NE TRAVERSENT
   PAS la frontière vers ce fichier : les valeurs ci-dessous sont
   donc les MÊMES VALEURS LITTÉRALES recopiées depuis config.css
   (jamais une nouvelle palette), pas une référence aux variables
   (impossible depuis ici).

   Vague 4.1, cause du flou corrigée : un SEUL background-image en
   cover sur toute la hauteur de la section (plusieurs milliers de
   px) forçait le navigateur à agrandir une image source de 1600×
   900 de façon extrême (facteur ×5 et plus) pour couvrir la
   hauteur totale — d'où l'aspect flou/brumeux constaté, PAS un
   filter:blur (jamais utilisé ici). Remplacé en 4.1 par 3 zones
   plus courtes portant chacune le même fond ; en 4.2 chaque zone a
   reçu un cadrage/voile différent pour casser la répétition — mais
   ça restait perçu comme 3 bandes photographiques recollées.

   Vague 4.3, priorité A — un seul fond, une seule fois : l'image
   n'est plus posée sur chaque zone, mais UNE SEULE FOIS sur
   .anagrammes-seo::before (pseudo-élément ancré en haut de toute la
   section, hauteur plafonnée via clamp() pour ne jamais dépasser un
   agrandissement raisonnable). Elle s'estompe ensuite via un
   dégradé vers la couleur unie --seo-green-behind, qui couvre le
   reste de la section (potentiellement très haute). Les anciens
   .anagrammes-seo__zone--top/mid/bottom (3 images, 3 voiles) sont
   supprimés : .anagrammes-seo__zone redevient un simple conteneur
   structurel sans fond propre, placé au-dessus du pseudo-élément
   (z-index) pour que son contenu reste lisible. filter:none /
   background-repeat:no-repeat / pas de background-attachment:fixed,
   toujours respectés.
   ============================================================= */

.anagrammes-seo {
  --seo-green-page:       #07150f;
  --seo-green-behind:     #0a1f16;
  /* Vague 4.2 : .90/.86 -> .74/.70. Vague 4.3, priorité B — encore un peu
     plus transparentes (.71/.67, dans la fourchette .68-.74 demandée) pour
     mieux fondre les cartes dans le décor ; bordure dorée nette + ombre
     interne + léger overlay interne (voir .anagrammes-seo__card et consorts)
     compensent la lisibilité, jamais de glassmorphism (pas de blur). */
  --seo-green-panel:      rgba(5, 32, 22, .71);
  --seo-green-panel-soft: rgba(5, 32, 22, .67);
  --seo-gold:             #d6ac60;
  --seo-gold-light:       #e9c987;
  --seo-gold-line:        rgba(214, 172, 96, .55);
  --seo-gold-line-soft:   rgba(214, 172, 96, .35);
  --seo-ivory:            #f3e8d1;
  --seo-ivory-title:      #eccf8f;
  --seo-text:             #f2e6cd;
  --seo-text-soft:        rgba(238, 226, 200, .85);
  --seo-text-muted:       rgba(232, 218, 188, .62);
  --seo-radius-card:      14px;
  --seo-radius-pill:      999px;
  --seo-max-width:        1200px;

  position: relative;
  display: block;
  width: 100%;
  font-family: 'Lora', Georgia, serif;
  color: var(--seo-text);
  background: var(--seo-green-behind);
}

.anagrammes-seo[hidden] { display: none; }

/* ---------- Fond unique (priorité A, Vague 4.3) ---------- */
/* Une seule image, une seule fois, ancrée en haut de la section via
   un pseudo-élément absolu (hauteur plafonnée par clamp() pour ne
   jamais forcer un agrandissement extrême comme l'ancien bug 4.1).
   Le dégradé l'éteint ensuite vers --seo-green-behind, qui prend le
   relais en fond uni pour le reste de la section (quelle que soit sa
   hauteur réelle) : aucune répétition de motif, aucune bande. */
.anagrammes-seo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(640px, 64vw, 1500px);
  background-image:
    linear-gradient(180deg, rgba(2, 32, 23, .40) 0%, rgba(2, 28, 20, .72) 55%, rgba(10, 31, 22, 1) 100%),
    url('../assets/background/config-fond.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  filter: none;
  z-index: 0;
  pointer-events: none;
}

.anagrammes-seo__inner {
  max-width: var(--seo-max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 44px);
}

/* ---------- Zones (structure uniquement, priorité A) ---------- */
/* Vague 4.1/4.2 : portaient chacune leur propre image + voile (3
   bandes photographiques perçues comme répétées). Vague 4.3 : le
   fond est désormais unique (.anagrammes-seo::before ci-dessus) ;
   .anagrammes-seo__zone redevient un simple conteneur structurel,
   sans background propre, seulement repositionné au-dessus du
   pseudo-élément pour rester lisible. */
.anagrammes-seo__zone {
  position: relative;
  z-index: 1;
}

/* ---------- Transition / séparateurs dorés ---------- */
.anagrammes-seo__transition {
  display: flex;
  justify-content: center;
  padding: 26px 16px;
}
.anagrammes-seo__transition--tight { padding: 14px 16px 30px; }
/* Priorité 13/14 — séparateur nettement plus large (il était perçu
   trop court) : desktop ~380px, tablette ~280px, mobile ~180px,
   jamais recadré (height:auto préserve l'ornement complet). */
.anagrammes-seo__separator {
  display: block;
  width: clamp(180px, 30vw, 380px);
  height: auto;
  opacity: .9;
}
@media (max-width: 1023px) {
  .anagrammes-seo__separator { width: clamp(180px, 34vw, 300px); }
}
@media (max-width: 639px) {
  .anagrammes-seo__separator { width: clamp(150px, 48vw, 210px); }
}

/* ---------- Intro ---------- */
.anagrammes-seo__intro {
  text-align: center;
  padding: 4px 16px 40px;
}
.anagrammes-seo__title {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--seo-ivory-title);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.anagrammes-seo__subtitle {
  margin: 0 auto;
  max-width: 62ch;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--seo-text-soft);
}

/* ---------- Grille éditoriale (6 blocs) ---------- */
.anagrammes-seo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 8px 0 44px;
}
@media (min-width: 760px) {
  .anagrammes-seo__grid { grid-template-columns: 1fr 1fr; gap: 28px 30px; }
}
/* Zone 2 (priorité 9) — ne reprend pas le padding-top de l'intro (zone 1) :
   un simple espacement d'ouverture propre à cette zone, jamais une valeur
   inline dans le HTML. */
.anagrammes-seo__grid--open-top { padding-top: 44px; }

/* Priorité 10 — PAS de grand panneau unique qui enferme toute la grille :
   chaque carte porte son propre voile semi-opaque (90% environ), le décor
   de la zone reste visible AUTOUR (dans les gaps de 24-30px ci-dessus). */
.anagrammes-seo__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--seo-gold-line);
  border-radius: var(--seo-radius-card);
  background: var(--seo-green-panel);
  /* Vague 4.2/4.3 — l'opacité du fond baisse par étapes (.90 -> .74 -> .71) ;
     l'ombre interne (renforcée en 4.3) compense en assombrissant légèrement
     la zone sous le texte, sans jamais recourir à un blur/glassmorphism. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(233, 201, 135, .08), inset 0 0 30px rgba(2, 10, 7, .32);
}
@media (min-width: 560px) {
  .anagrammes-seo__card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    /* Priorité 18 — hauteur confortable (jamais recherchée artificiellement,
       simple conséquence du padding/de l'image agrandie ci-dessous). */
    min-height: 220px;
  }
  /* Priorité 23/24 — alternance : cartes impaires = image à gauche (bord
     extérieur gauche de la ligne), cartes paires = image à droite (bord
     extérieur droit) — composition en "ailes" de la maquette. */
  .anagrammes-seo__card--reverse { flex-direction: row-reverse; }
}

.anagrammes-seo__figure {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Priorité 16-22 — illustrations réellement grandes (30-38% de la carte
   desktop), jamais des vignettes de 60-80px. object-fit:contain conserve
   le ratio/la transparence de chaque asset. */
.anagrammes-seo__figure img {
  display: block;
  width: clamp(150px, 34%, 210px);
  height: auto;
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
@media (max-width: 559px) {
  .anagrammes-seo__figure img { width: clamp(130px, 42vw, 170px); max-height: 190px; margin: 0 auto; }
  .anagrammes-seo__figure { justify-content: center; }
}

.anagrammes-seo__card-body { flex: 1 1 auto; min-width: 0; }
.anagrammes-seo__card-title {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  color: var(--seo-ivory-title);
}
.anagrammes-seo__card-text {
  margin: 0 0 16px;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--seo-text-soft);
  /* Vague 4.3, priorité 15 — filet de sécurité de contraste très discret,
     seulement utile sur les zones de décor les plus claires derrière la
     carte désormais plus transparente. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ---------- CTA — pastilles premium (priorité 28/29) ---------- */
.anagrammes-seo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--seo-gold-line);
  border-radius: var(--seo-radius-pill);
  background: linear-gradient(180deg, rgba(214, 172, 96, .14), rgba(214, 172, 96, .05));
  font-family: 'Lora', serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--seo-gold-light);
  letter-spacing: .02em;
  white-space: nowrap;
  /* Non cliquable (aucune route interne confirmée, voir rapport) : jamais
     un curseur/comportement de lien pour un élément purement visuel. */
  cursor: default;
}
.anagrammes-seo__cta-arrow { font-size: 13px; line-height: 1; }

/* Micro-patch liens SEO — variante RÉELLEMENT cliquable (<a> avec une vraie destination
   sourcée/interne/Vérificateur), même pastille visuelle que ci-dessus, juste un curseur et un
   état hover/focus en plus (jamais une nouvelle direction artistique). */
a.anagrammes-seo__cta--link {
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
a.anagrammes-seo__cta--link:hover,
a.anagrammes-seo__cta--link:focus-visible {
  background: linear-gradient(180deg, rgba(214, 172, 96, .22), rgba(214, 172, 96, .09));
  border-color: var(--seo-gold-light);
}
/* Indicateur discret de lien EXTERNE (Larousse/Saturday Evening Post/PubMed) — jamais sur un
   lien interne (règles/modes) ni sur le Vérificateur (même domaine agoradesmots.com). */
.anagrammes-seo__cta-external-icon { font-size: 11px; opacity: .75; }

/* ---------- Outils Agora ---------- */
.anagrammes-seo__tools { padding: 8px 0 8px; text-align: center; }
.anagrammes-seo__tools-title {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(23px, 2.5vw, 29px);
  font-weight: 600;
  color: var(--seo-ivory-title);
}
.anagrammes-seo__tools-subtitle {
  margin: 0 auto 30px;
  max-width: 58ch;
  font-size: 15px;
  color: var(--seo-text-soft);
}
.anagrammes-seo__tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  text-align: left;
}
/* minmax(0, 1fr), jamais 1fr seul : un 1fr "nu" hérite d'un minimum
   automatique = min-content de son contenu, qui remonte depuis le CTA
   de la carte -> colonnes de largeurs inégales et un "blowout" (cartes
   qui dépassent le conteneur, régression détectée à 768px lors des
   tests visuels de cette vague).
   Palier intermédiaire à 2 colonnes entre 640 et 900px (tablette
   portrait type iPad Mini) : à 768px, 3 colonnes égales ne laissaient
   que ~95px de large pour [icône + CTA], forçant la pilule CTA à
   retourner à la ligne mot par mot (illisible). 2 colonnes donnent à
   chaque carte ~350px, largement assez pour la même logique interne
   (icône + titre/texte/CTA) sans la casser — cf. "si les 3 cartes
   passent en 1 ou 2 colonnes, elles gardent la même logique interne". */
@media (min-width: 640px) and (max-width: 899px) {
  .anagrammes-seo__tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .anagrammes-seo__tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Priorité 30-33 — [grande icône] [texte] en ligne, jamais une minuscule
   icône au-dessus d'un texte dense.

   Vague 4.3, partie C — alignement interne des 3 cartes. Les 3 cartes
   partagent déjà la même hauteur (étirement par défaut de la grille
   CSS .anagrammes-seo__tools-grid, align-items:stretch implicite).
   Ce qui manquait : un rythme interne commun. .anagrammes-seo__tool-card
   devient une grille 2 colonnes (zone icône fixe | contenu) x 3 lignes
   (titre / description flexible / CTA) ; .anagrammes-seo__tool-body
   passe en display:contents pour laisser titre/texte/CTA devenir des
   items directs de cette grille (aucun changement HTML nécessaire).
   La ligne centrale (1fr) absorbe l'écart de longueur des descriptions,
   ce qui ancre systématiquement le CTA sur la même ligne basse dans les
   3 cartes, et le titre sur la même ligne haute. */
.anagrammes-seo__tool-card {
  display: grid;
  /* clamp() plutôt qu'un plancher fixe : reste 80-100px confortable sur
     desktop, mais se réduit sur la tranche tablette 640-900px (3 colonnes
     serrées) pour laisser assez de place au texte/CTA sans les écraser. */
  grid-template-columns: clamp(56px, 9vw, 92px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 18px;
  row-gap: 10px;
  padding: 24px 22px;
  border: 1px solid var(--seo-gold-line);
  border-radius: var(--seo-radius-card);
  background: var(--seo-green-panel-soft);
  box-shadow: inset 0 0 26px rgba(2, 10, 7, .3);
}
/* Zone icône de hauteur/largeur identique pour les 3 cartes (priorité 22/28) :
   une boîte carrée commune, object-fit:contain préserve chaque ratio sans
   déformer, et centre visuellement les 3 icônes entre elles. */
.anagrammes-seo__tool-icon {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: center;
  width: clamp(56px, 9vw, 92px);
  height: clamp(56px, 9vw, 92px);
  object-fit: contain;
}
.anagrammes-seo__tool-body { display: contents; }
.anagrammes-seo__tool-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19.5px;
  font-weight: 600;
  color: var(--seo-ivory-title);
}
.anagrammes-seo__tool-text {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--seo-text-soft);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/* Priorité 25 — CTA ancré sur la même ligne basse dans les 3 cartes.
   white-space repassé à normal (la règle globale .anagrammes-seo__cta le
   met à nowrap pour les 6 cartes éditoriales, où la colonne est bien plus
   large) : en grille 3 colonnes serrée (tablette ~230px/carte), un CTA
   forcé sur une seule ligne est ce qui causait le blowout de grille
   ci-dessus — autorisé à passer sur 2 lignes si vraiment à l'étroit,
   jamais à pousser la carte hors de sa colonne. */
.anagrammes-seo__tool-card .anagrammes-seo__cta {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: stretch;
  white-space: normal;
  text-align: left;
}
.anagrammes-seo__tool-card .anagrammes-seo__cta-arrow { flex: 0 0 auto; }

/* ---------- FAQ (Vague 4.1, nouveau) ---------- */
.anagrammes-seo__faq { padding: 8px 0 8px; }
.anagrammes-seo__faq-head { text-align: center; padding-bottom: 30px; }
.anagrammes-seo__faq-title {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(23px, 2.5vw, 29px);
  font-weight: 600;
  color: var(--seo-ivory-title);
}
.anagrammes-seo__faq-subtitle {
  margin: 0 auto;
  max-width: 58ch;
  font-size: 15px;
  color: var(--seo-text-soft);
}
.anagrammes-seo__faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 760px) {
  /* Priorité 36 — deux colonnes, 3 questions à gauche / 3 à droite : une
     grille à 2 colonnes avec remplissage par colonne (jamais par ligne)
     place naturellement les questions 1-3 à gauche et 4-6 à droite. */
  .anagrammes-seo__faq-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    gap: 14px 24px;
  }
}

.anagrammes-seo__faq-item {
  border: 1px solid var(--seo-gold-line);
  border-radius: 12px;
  background: var(--seo-green-panel);
  box-shadow: inset 0 0 20px rgba(2, 10, 7, .22);
  overflow: hidden;
}
.anagrammes-seo__faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--seo-ivory);
  cursor: pointer;
  list-style: none;
}
.anagrammes-seo__faq-item summary::-webkit-details-marker { display: none; }
.anagrammes-seo__faq-item summary:focus-visible {
  outline: 2px solid var(--seo-gold);
  outline-offset: -2px;
}
/* Vague 4.2, priorité 1 — l'ancien chevron texte (› à 15px, simple
   rotation) était jugé trop petit/peu visible. Remplacé par un vrai
   signe +/- dessiné en CSS (deux barres en pseudo-éléments dans un
   cercle doré), 22px desktop / 19px mobile — toujours net (jamais
   un caractère flou dépendant de la police), couleur or franche.
   Le <span> HTML reste vide (voir index.html) : c'est volontaire,
   le symbole est entièrement porté par ::before/::after. */
.anagrammes-seo__faq-chevron {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--seo-gold);
  border-radius: 50%;
  background: rgba(214, 172, 96, .08);
}
.anagrammes-seo__faq-chevron::before,
.anagrammes-seo__faq-chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--seo-gold-light);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.anagrammes-seo__faq-chevron::before { width: 10px; height: 2px; }
.anagrammes-seo__faq-chevron::after {
  width: 2px;
  height: 10px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Ouvert : la barre verticale disparaît -> le "+" devient "-". */
.anagrammes-seo__faq-item[open] .anagrammes-seo__faq-chevron::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}
@media (max-width: 639px) {
  .anagrammes-seo__faq-chevron { width: 19px; height: 19px; }
  .anagrammes-seo__faq-chevron::before { width: 9px; }
  .anagrammes-seo__faq-chevron::after { height: 9px; }
}
.anagrammes-seo__faq-answer {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--seo-text-soft);
}

/* ---------- Footer discret ---------- */
.anagrammes-seo__foot {
  padding: 26px 0 40px;
  text-align: center;
  font-size: 12px;
  color: var(--seo-text-muted);
  border-top: 1px solid var(--seo-gold-line-soft);
}