/* ==========================================================================
   dicos.css — Page de choix des dictionnaires unilingues
   Sert /fr/dictionnaires-unilingues et /en/monolingual-dictionaries.

   Écrite le 27/08/2026 pour remplacer CSS_LEGAL sur ces deux pages, dont
   l'habillage venait d'une feuille conçue pour les pages légales (texte
   justifié, carte blanche, :root local doublant tokens.css).
   Cette feuille ne déclare AUCUNE couleur de site : tout vient de
   tokens.css. Si une valeur manque ici, elle s'ajoute LÀ-BAS.

   CORRIGÉ AU DEUXIÈME PASSAGE, deux défauts constatés à l'œil :
   1. TOUT ÉTAIT SOULIGNÉ. `.contenu-principal a` (spécificité 0,1,1)
      l'emportait sur `.dico-carte` (0,1,0) — or la carte EST un <a>, donc
      son titre et sa phrase héritaient du soulignement des liens de texte.
      Le style de lien est désormais porté par `.contenu-principal p a`,
      qui ne peut atteindre que les liens DANS un paragraphe.
   2. LES FILETS BLEUS SONT RETIRÉS — celui posé au-dessus des h3 et celui
      qui se dépliait en tête de carte au survol. Ils décoraient sans rien
      encoder. Les titres se tiennent par leur graisse et leur air ; la
      carte survolée se signale par son élévation et son contour.
   ========================================================================== */

/* ───── COLONNE DE CONTENU ────────────────────────────────────────────────
   Pas de carte blanche à ombre portée : c'est le geste d'une page
   d'obligation. Le texte se lit à plat sur le fond du site ; ce sont les
   cinq cartes qui prennent le relief. */

main {
  max-width: 60rem;
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-5);
  box-sizing: border-box;
}

.contenu-principal {
  margin: 0 auto var(--space-8);
}

/* ───── TITRES DE SECTION ─────────────────────────────────────────────────
   Aucun filet, aucun soulignement : l'air au-dessus du titre suffit à
   ouvrir la section, et la graisse suffit à la nommer. */

.contenu-principal h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-7) 0 var(--space-4);
}

.contenu-principal h3:first-child {
  margin-top: 0;
}

/* ───── CORPS DE TEXTE ────────────────────────────────────────────────────
   JUSTIFIÉ, AVEC CÉSURE. La justification seule étire les espaces mots
   pour aligner le bord droit ; sur un texte qui porte des groupes
   insécables (`CC BY-SA 4.0`, les &nbsp; du français avant « ? » et « ; »)
   elle ouvre des blancs et creuse des rivières. `hyphens: auto` autorise
   le navigateur à couper les mots longs selon les règles de la langue, ce
   qui rend au moteur la souplesse qui lui manquait — c'est la césure, et
   non le renoncement à la justification, qui est la vraie réponse.

   La césure S'APPUIE SUR L'ATTRIBUT lang DE LA PAGE : sans lui, aucun
   navigateur ne coupe. Les deux pages le posent (`$lang`).

   `hyphenate-limit-chars: 8 4 3` empêche les coupes laides : seuls les
   mots d'au moins 8 lettres sont coupés, avec au moins 4 lettres avant le
   trait et 3 après. Sans cette limite on obtient « d'u-sage ».

   PAS DE PLAFOND DE MESURE : un `max-width: 68ch` a été essayé puis
   retiré, il arrêtait le texte avant le bord des cartes. La largeur de
   lecture est celle de la colonne, réglée une seule fois sur `main`. */

.contenu-principal p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-body);
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 8 4 3;
}

.contenu-principal p:last-child {
  margin-bottom: 0;
}

.contenu-principal em {
  font-style: italic;
  color: var(--text-strong);
}

/* LIENS DE TEXTE — dans un paragraphe, et nulle part ailleurs.
   `p a` et non `a` : la carte est un <a> et ne doit rien recevoir d'ici.
   C'est le défaut du premier passage, et la raison de ce sélecteur. */
.contenu-principal p a {
  color: var(--brand-700);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--brand-a38);
  transition: color var(--duration-fast) var(--ease),
              text-decoration-color var(--duration-fast) var(--ease);
}

.contenu-principal p a:hover {
  color: var(--brand-600);
  text-decoration-color: currentColor;
}

/* ───── LA GRILLE DES CINQ ────────────────────────────────────────────────
   auto-fit sur 15rem : trois colonnes au large, deux au milieu, une au
   téléphone, sans point de rupture écrit à la main. La dernière rangée en
   porte deux — une grille de cinq n'a pas à faire semblant d'être pleine. */

.dicos-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}

/* ───── UNE CARTE ─────────────────────────────────────────────────────────
   La carte entière est le lien. Elle ne porte donc AUCUN soulignement :
   c'est son contour qui dit qu'on peut cliquer, et son élévation au
   survol qui le confirme. */

.dico-carte {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}

.dico-carte:hover,
.dico-carte:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-a35);
}

.dico-carte:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-lg);
}

/* Le compte — LU en base à chaque rendu, jamais écrit en dur.
   Traité comme une étiquette de donnée et non comme un titre : discret,
   en gris, pour que le nom du dictionnaire reste le point d'entrée.
   tabular-nums aligne les chiffres d'une carte à l'autre malgré les
   espaces de milliers. */
.dico-carte .dico-compte {
  order: -1;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.dico-carte h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  transition: color var(--duration-fast) var(--ease);
}

.dico-carte:hover h4,
.dico-carte:focus-visible h4 {
  color: var(--brand-700);
}

/* Les deux <p> de la carte sont DANS .contenu-principal et reçoivent donc
   la justification et la césure du corps de texte. Il faut les en sortir :
   une colonne de 15rem n'a pas assez de mots par ligne pour justifier, et
   une étiquette ne se césure pas. C'est la note du §7 de la REPRISE, qui
   valait déjà pour legal.css. */
.dico-carte .dico-compte,
.dico-carte .dico-phrase {
  text-align: left;
  -webkit-hyphens: manual;
          hyphens: manual;
}

.dico-carte .dico-phrase {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-soft);
}

/* ───── ICÔNES SOCIALES DU FOOTER — REPRISES DE legal.css ─────────────────
   Le footer est inclus par ces deux pages (FOOTER_PATH), mais AUCUNE
   feuille globale ne style ses icônes : mesuré le 27/08/2026,
   `.social-link` n'existe que dans contact.css, legal.css et
   maintenance.css, qui en portent chacune leur copie.

   DETTE CONNUE : ceci est la QUATRIÈME copie. Le geste juste est une
   feuille de footer chargée partout, qui les supprimerait toutes —
   chantier de portée large, écarté le 27/08. Toute reprise de ce bloc
   doit se faire dans les quatre à la fois.

   Les couleurs de marque des plateformes restent en dur : elles
   n'appartiennent pas au site et n'ont rien à faire dans tokens.css. */

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

.social-link svg {
  width: 18px;
  height: 18px;
  fill: var(--footer-link);
  transition: fill var(--duration-fast) var(--ease);
}

.social-link:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

.social-link:hover svg {
  fill: var(--on-dark);
}

.social-youtube:hover   { background: #ff0000; }
.social-tiktok:hover    { background: #010101; }
.social-linkedin:hover  { background: #0a66c2; }
.social-facebook:hover  { background: #1877f2; }
.social-instagram:hover {
  background: radial-gradient(circle at 30% 107%,
              #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* ───── PETITS ÉCRANS ─────────────────────────────────────────────────────
   La grille se replie seule (auto-fit) ; restent la marge de la colonne
   et l'aération des sections. */

@media (max-width: 768px) {
  main {
    margin-top: var(--space-5);
    padding: 0 var(--space-4);
  }
  .contenu-principal h3 {
    margin-top: var(--space-6);
  }
  .dico-carte {
    padding: var(--space-4);
  }
}

/* Sous 600px la colonne ne porte plus qu'une trentaine de caractères :
   la justification n'a plus assez de mots par ligne pour répartir le
   blanc, et la césure ne rattrape pas. On revient au drapeau. */
@media (max-width: 600px) {
  .contenu-principal p {
    text-align: left;
  }
}

/* ───── PLANCHER DE QUALITÉ ───────────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
  .dico-carte,
  .dico-carte h4,
  .contenu-principal p a,
  .social-link,
  .social-link svg {
    transition: none;
  }
  .dico-carte:hover,
  .dico-carte:focus-visible,
  .social-link:hover {
    transform: none;
  }
}

@media print {
  main {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .dicos-grille {
    grid-template-columns: 1fr 1fr;
  }
  .dico-carte {
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    break-inside: avoid;
  }
}