/* =========================================================================
   english-conjugator.css — feuille de style COMPLÈTE et AUTONOME du
   conjugueur de verbes ANGLAIS (pages outil + fiches de verbe).

   Indépendante du conjugueur FRANÇAIS : ce fichier ne dépend PAS de
   conjugueur/conjugueur.css. Il regroupe tout ce qui était auparavant
   injecté en <style> inline (ConjugationRenderer::css() et search_form.php) :

     1. Mise en page générale de la page outil (fond, titres, canvas).
     2. Barre de recherche animée (.englobe) — recopiée du modèle FR pour
        être autoportante.
     3. Autocomplétion (.ac-menu / .ac-item) — présentation alignée sur le FR
        (le menu prolonge la zone bleue, surlignage tapé/suggéré, fondu).
     4. Fiche de conjugaison (.conj …) — rendu type « fiche de référence »,
        bascule GB/US, codage couleur des voix.

   Chargé via la constante CSS_ENGLISH_CONJUGATOR (config.php).
   ========================================================================= */

/* Piles de polices — 100 % auto-hébergées (fonts.css), aucune dépendance tierce.
   Graisses réellement disponibles : Inter 400/500/700, Plus Jakarta Sans 700/800.
   Déclarées sur :root et non sur main, pour que .outil fonctionne même hors <main>. */
:root {
  --font-display: 'Plus Jakarta Sans', 'Inter', 'Inter-fallback', system-ui, sans-serif;
  --font-text: 'Inter', 'Inter-fallback', system-ui, sans-serif;
}

/* =========================================================================
   1. PAGE OUTIL (fond, titres, conteneurs)
   Recopié du modèle FR pour autonomie complète.
   ========================================================================= */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  /* Pas de font-family ici : on laisse la pile Inter du site (critical.php) s'appliquer. */
  background-color: #f8f8f8;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
h1.page-title { margin-top: 40px; z-index: 1; }

/* Barre nue (sans carte ni titre), comme le dictionnaire. Centrage reproduit
   À L'IDENTIQUE du dico pour un déploiement symétrique : le CONTENEUR centre en
   text-align, le FORMULAIRE est un bloc centré à largeur max, et .englobe
   (inline-block, margin:auto) s'étend de 60px à 100% du formulaire — donc
   symétriquement, pas de la gauche. */
.form-group {
  position: relative;
  z-index: 10;
  text-align: center;
  margin: 30px auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem;
}
#formid {
  max-width: 46rem;      /* même largeur déployée que le dico */
  margin: 0 auto;
  width: 100%;
}
/* .englobe-wrapper n'est plus émis par search_form.php ; règle conservée inerte
   au cas où un cache servirait l'ancien HTML. */
.englobe-wrapper {
  max-width: 46rem;
  margin: 30px auto;
  text-align: center;
}

/* .entete (titre au-dessus de la barre) retiré du HTML : le hero suffit.
   Règle neutralisée pour ne rien afficher si un cache sert l'ancien HTML. */
.entete { display: none; }

.outil,
main > h1.page-title {
  text-align: center;
  /* Explicite : sans ça, fonts.css impose Plus Jakarta Sans à tous les h1. */
  font-family: var(--font-display);
  font-weight: 800;
  color: #ff8c00;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 30px;
  text-shadow: 1px 1px 5px rgba(255, 140, 0, .4);
  position: relative;
  z-index: 10;
  user-select: none;
}
.outil { font-size: 2.8rem; margin-bottom: 30px; }
main > h1.page-title {
  font-size: 2.8rem;
  margin-top: 40px;
  margin-bottom: 30px;
  position: relative;
}
main > h2.page-subtitle {
  text-align: center;
  font-weight: 700;
  color: #000;
  position: relative;
  z-index: 10;
  user-select: none;
}
@media (max-width: 600px) {
  .outil,
  main > h1.page-title { font-size: 2rem; letter-spacing: 2px; margin-bottom: 20px; }
}

canvas.webgl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* Accessibilité / états vides */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.no-result {
  text-align: center;
  color: #b00020;
  font-weight: 700;
  margin: 24px auto;
  max-width: 500px;
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  box-sizing: border-box;
}

/* =========================================================================
   2. BARRE DE RECHERCHE ANIMÉE (.englobe)
   Recopiée du conjugueur FR pour rester totalement indépendante.
   Repliée : pastille de 60px en forme de loupe. Au focus (.ouverte) : la
   barre s'écarte sur toute la largeur et révèle son contenu.
   ========================================================================= */
.englobe {
  position: relative;
  z-index: 10;
  max-height: 60px;
  min-height: 60px;
  width: 60px;
  transition: width .8s ease, max-height .8s ease, border-radius .8s ease;
  border: 3px solid #0038A8;   /* accent du dictionnaire (harmonisation barre) */
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin: auto;
  display: inline-block;
  color: #000;
}
/* Focus : la barre s'écarte en largeur. La HAUTEUR reste à 60px (max-height
   inchangé) tant qu'il n'y a pas de suggestions — c'est .has-results, ajoutée
   par le JS quand le menu se remplit, qui élève le plafond de façon ANIMÉE.
   Sans ça, max-height passait à 460px dès le focus et la zone sautait d'un coup
   en hauteur à l'arrivée des résultats (height:auto n'étant pas animable). */
.englobe.ouverte {
  width: 100%;
  border-radius: 30px;
}
/* Suggestions visibles : on élève le plafond de hauteur. La transition
   max-height .8s interpole 60px -> 460px, donc la zone bleue grandit en douceur.
   460px couvre la barre (~60px) + le menu (plafonné à 320px, scroll au-delà). */
.englobe.ouverte.has-results {
  /* Barre (~60px) + menu déployé (jusqu'à 480px) : plafond à 560px pour ne pas
     tronquer les 10 suggestions. */
  max-height: 560px;
}
.englobe.animating {
  transition: width .8s ease, max-height .8s ease, border-radius .8s ease;
}

.barre {
  height: 54px;
  width: 100%;
  padding: 0 16px;
  line-height: normal;
  font-size: 1.25em;
  border: none;
  background-color: transparent;
  color: #000;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Focus : la pastille .englobe porte déjà l'indication visuelle (sa bordure).
   On neutralise donc tout anneau/halo propre à l'input (outline ET box-shadow),
   y compris ceux qu'un CSS global du site pourrait injecter. Spécificité
   renforcée + !important, comme le dictionnaire (évite le double cadre). */
.englobe .barre:focus,
.englobe .barre:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Repliée (en loupe), l'input ne doit RIEN laisser voir : ni le texte saisi,
   ni le placeholder, qui déborderaient sur le bord de la pastille. On rend le
   contenu transparent tant que .englobe n'a pas .ouverte, puis on le révèle. */
.englobe:not(.ouverte) .barre { color: transparent; }
.englobe:not(.ouverte) .barre::placeholder { color: transparent; }
.barre,
.barre::placeholder { transition: color .4s ease; }

/* Loupe (bouton submit) en bas à droite de la pastille. */
.search {
  color: #000;
  position: absolute;
  bottom: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  display: block;
}
.englobe:not(.ouverte) .search::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.search::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 3px;
  background-color: #0038A8;   /* accent du dictionnaire (harmonisation barre) */
  transform: rotate(45deg);
  transform-origin: left center;
  top: 3px;
  left: 2px;
  border-radius: 1px;
}

/* =========================================================================
   3. AUTOCOMPLÉTION (.ac-menu / .ac-item)
   Le JS (autocomplete.js) crée <ul class="ac-menu"> dans .englobe et pose
   .ouverte + les classes ac-typed / ac-rest. Présentation alignée sur le FR :
   le menu prolonge la zone bleue (pas de boîte blanche flottante détachée),
   surlignage « tapé » (noir) vs « suggéré » (gris gras), apparition en fondu.
   ========================================================================= */
.ac-menu {
  list-style: none;
  margin: 0;                   /* la marge sera rétablie en .has-results */
  padding: 0;                  /* idem : 0 quand fermé pour ne pas laisser un trou */
  position: static;            /* dans le flux : pousse la hauteur de .englobe */
  background: transparent;     /* c'est .englobe.ouverte qui fournit le cadre */
  border: none;
  box-shadow: none;
  max-height: 0;               /* fermé : hauteur nulle, contenu clipé */
  overflow: hidden;            /* clipe pendant l'expansion -> effet visible */
  text-align: left;
  transition: max-height .45s ease, padding .45s ease, margin .45s ease;
}
/* Suggestions présentes : le menu se déploie de 0 à sa hauteur max, en douceur.
   Au-delà de 320px, scroll interne. C'est cette transition qui fait grandir la
   zone bleue verticalement de façon progressive. */
.englobe.has-results .ac-menu {
  /* Assez haut pour afficher les 10 suggestions sans ascenseur : ~44px par item
     × 10 + padding ≈ 450px ; on prend 480px de marge. Pas de scroll vertical. */
  max-height: 480px;
  overflow-y: visible;
  overflow-x: hidden;
  margin: 4px 0 0;
  padding: 6px 0 2px;
}
.englobe:not(.ouverte) .ac-menu { display: none !important; }

.ac-item {
  padding: 7px 18px;
  cursor: pointer;
  font-size: 1.05em;
  color: #000;
  display: flex;
  align-items: baseline;
  border-radius: 8px;
  opacity: 0;
  animation: acFadeSlideIn .3s ease forwards;
}
.ac-item:hover,
.ac-item.ac-active { background: rgba(31, 124, 255, .12); }

/* Partie déjà tapée vs reste suggéré (mêmes rôles que typed/suggested du FR). */
.ac-typed { color: #000; font-weight: 400; }
.ac-rest  { color: #555; font-weight: 700; }
.ac-item:hover .ac-rest,
.ac-item.ac-active .ac-rest { color: #000; }

@keyframes acFadeSlideIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-item { animation: none; opacity: 1; }
}

/* =========================================================================
   4. FICHE DE CONJUGAISON (.conj …)
   Rapatriée de ConjugationRenderer::css(). Rendu « fiche de référence »,
   bascule GB/US, codage couleur des voix.
   ========================================================================= */
.conj {
  --ink: #1a1a2e;
  --paper: #fbfaf7;
  --rule: #e2ddd3;
  --amber: #9a6a3c;
  --slate: #3d5a73;
  --verdigris: #4a6552;
  --muted: #8a8478;
  font-family: var(--font-text);
  color: var(--ink);
  /* Fond légèrement translucide + flou : la fiche reste lisible mais laisse
     deviner l'animation de vagues WebGL derrière (canvas.webgl, z-index 0).
     position:relative + z-index la posent AU-DESSUS du canvas. */
  background: rgba(251, 250, 247, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  line-height: 1.4;
}

/* ── En-tête ── */
.conj-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2rem;
}
.conj-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.conj-eyebrow {
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.conj-verb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0;
  letter-spacing: -0.01em;
}
.conj-fr {
  font-style: italic;
  color: var(--amber);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
}
.conj-variant {
  flex: none;
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-text);
  font-size: 0.8rem;
  cursor: pointer;
  background: none;
  padding: 0;
}
.conj-variant .vlabel { padding: 0.35rem 0.8rem; transition: background 0.15s, color 0.15s; }
.conj-variant .vlabel-gb { background: var(--ink); color: var(--paper); }
.conj-variant .vlabel-us { color: var(--ink); }
.conj-variant[data-variant="us"] .vlabel-gb { background: none; color: var(--ink); }
.conj-variant[data-variant="us"] .vlabel-us { background: var(--ink); color: var(--paper); }

/* ── Modes ── */
.mood { margin-bottom: 2.5rem; }
.mood-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.tense-grid {
  display: grid;
  /* auto-FIT (et non auto-fill) : les colonnes existantes s'étirent pour occuper
     toute la largeur disponible, au lieu de laisser des pistes vides à droite
     quand il reste de la place (cause du « vide à droite »). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem 2rem;
}

/* ── Temps ── */
/* La carte épouse son contenu et reste alignée à GAUCHE dans sa colonne. */
.tense {
  width: max-content;
  max-width: 100%;
  justify-self: start;
  text-align: left;
}
.tense-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.voices { display: flex; flex-direction: column; gap: 0.75rem; }
.voice-label {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
}
.voice-affirmative   .voice-label { color: var(--ink);       background: #efe9dd; }
.voice-negative      .voice-label { color: var(--amber);     background: #f3e8d8; }
.voice-interrogative .voice-label { color: var(--slate);     background: #e3eaf0; }
.voice-passive       .voice-label { color: var(--verdigris); background: #e3ece4; }

.voice-negative      .word { color: var(--amber); }
.voice-interrogative .word { color: var(--slate); }
.voice-passive       .word { color: var(--verdigris); }

/* ── Formes ── */
/* Grille commune à 2 colonnes posée sur .forms : toutes les lignes (.form
   dissoutes en display:contents) partagent les mêmes colonnes, donc pronoms et
   verbes restent alignés. Texte aligné à gauche (justify-content:start) ; c'est
   la CARTE .tense qui est centrée, pas le texte. */
.forms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Colonne 1 de largeur FIXE (et non max-content) pour que TOUTES les voix
     d'un même temps partagent le même rail vertical : pronoms (négatif, passif…)
     et auxiliaires (interrogatif) calés à droite tombent sur la même ligne, donc
     les verbes en colonne 2 s'alignent verticalement d'une voix à l'autre.
     ~6rem couvre « he, she, it » (mono 0.78rem) et « Would » (0.94rem). */
  grid-template-columns: 6rem max-content; /* pronom/aux | verbe */
  column-gap: 0.5rem;
  justify-content: start;      /* texte aligné à gauche dans la carte */
  align-items: baseline;
}
.form {
  display: contents;  /* .pron et .word rejoignent la grille de .forms */
  font-size: 0.94rem;
}
.pron {
  grid-column: 1;
  font-family: var(--font-text);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
  padding: 0.12rem 0 0;
  white-space: nowrap;   /* jamais de retour à la ligne du pronom */
}
.word {
  grid-column: 2;       /* toujours dans la colonne verbe, même si pas de pronom */
  font-weight: 400;
  padding: 0.12rem 0;
}
/* Interrogatif — « piste C » : l'AUXILIAIRE occupe la colonne 1 (calée à droite,
   comme le rail des pronoms des autres voix), et le pronom + reste vont en
   colonne 2. Cela rétablit la structure à deux colonnes commune à toutes les
   voix. Le pronom dans la forme garde le style gris/mono (.pron-inline). */
.aux {
  grid-column: 1;
  color: var(--slate);       /* couleur des formes interrogatives */
  text-align: right;
  padding: 0.12rem 0;
  white-space: nowrap;
}
.pron-inline {
  font-family: var(--font-text);
  font-size: 0.78rem;
  color: var(--muted);
}
.dash { color: var(--rule); }
.vextra { color: var(--muted); font-size: 0.85em; font-style: italic; }

/* ── Bascule GB/US des formes ── */
.v-us { display: none; }
.conj.show-us .v-gb { display: none; }
.conj.show-us .v-us { display: inline; }

@media (max-width: 480px) {
  /* Une seule colonne de temps, PLEINE largeur : sans ça, la grille auto-fill
     réserve des pistes de 320px à droite et laisse une bande vide. */
  .tense-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Padding latéral réduit pour récupérer de la largeur utile sur petit écran. */
  .conj { padding: 1.5rem 0.75rem 3rem; }
  .forms { font-size: 0.88rem; }
  .conj-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .conj-variant .vlabel { transition: none; }
}

/* =========================================================================
   5. CATALOGUE DES MODÈLES DE CONJUGAISON (.cmodel-…)
   Index (grille de cartes) + bandeau d'intro des fiches détail. Réutilise la
   palette de la fiche .conj (--ink/--paper/--rule/--muted) et le même rendu
   « posé au-dessus du canvas WebGL » (fond translucide + flou).
   ========================================================================= */
.cmodel-index,
.cmodel-intro {
  --ink: #1a1a2e;
  --paper: #fbfaf7;
  --rule: #e2ddd3;
  --slate: #3d5a73;
  --muted: #8a8478;
  font-family: var(--font-text);
  color: var(--ink);
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Index : groupes + grille de cartes ── */
.cmodel-index { padding: 2rem 1.25rem 1rem; }
.cmodel-group-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
}
.cmodel-group-title:first-child { margin-top: 0; }
.cmodel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
}
.cmodel-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  background: rgba(251, 250, 247, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cmodel-card:hover,
.cmodel-card:focus-visible {
  border-color: var(--slate);
  transform: translateY(-2px);
}
.cmodel-card-verb {
  font-weight: 700;
  font-size: 1.05rem;
}
.cmodel-card-rule {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ── Bandeau d'intro d'une fiche détail ── */
.cmodel-intro {
  padding: 1.5rem 1.25rem;
  text-align: center;
  /* Même conteneur translucide + flou que la carte des conjugaisons (.conj),
     posé au-dessus du canvas WebGL. */
  background: rgba(251, 250, 247, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  margin-bottom: 1.25rem;
}
.cmodel-rule { margin: 0 0 0.5rem; font-size: 1.1rem; }
.cmodel-rule-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  color: var(--muted);
  margin-right: 0.4rem;
}
.cmodel-rule-value { font-weight: 700; }
.cmodel-summary {
  margin: 0 auto 0.85rem;
  max-width: 60ch;
  color: var(--ink);
  line-height: 1.55;
}
.cmodel-back { margin: 0; }
.cmodel-back a {
  font-size: 0.92rem;
  color: var(--slate);
  text-decoration: none;
}
.cmodel-back a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .cmodel-grid { grid-template-columns: 1fr; }
  .cmodel-index { padding: 1.5rem 0.75rem 1rem; }
  .cmodel-intro { padding: 1.5rem 0.75rem 0; }
}

/* Lien du sous-titre d'une page de verbe vers sa fiche-modèle. */
.page-subtitle .conj-model-link,
a.conj-model-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #b9b2a4;
  transition: text-decoration-color 0.15s ease;
}
.page-subtitle .conj-model-link:hover,
a.conj-model-link:hover { text-decoration-color: currentColor; }

/* Lien du sous-titre de la fiche verbe vers sa fiche-modèle (réguliers). */
.page-subtitle .conj-model-link,
a.conj-model-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(61, 90, 115, 0.5);
  transition: text-decoration-color 0.15s ease;
}
a.conj-model-link:hover,
a.conj-model-link:focus-visible {
  text-decoration-color: currentColor;
}
/* Flèche du sous-titre : indique que le libellé mène à la fiche-modèle. Pas de
   soulignement sur la flèche ; léger glissement vers la droite au survol. */
.conj-model-arrow {
  display: inline-block;
  margin-left: 0.3em;
  text-decoration: none;
  transition: transform 0.15s ease;
}
a.conj-model-link:hover .conj-model-arrow,
a.conj-model-link:focus-visible .conj-model-arrow {
  transform: translateX(3px);
}