/* =========================================================================
   conjugueur.css — conjugueur de verbes FRANÇAIS.

   Le STYLE DE LA FICHE de conjugaison reprend désormais l'esthétique du
   conjugueur anglais (modèle « fiche de référence » : palette papier/encre,
   polices auto-hébergées Plus Jakarta Sans / Inter, cartes de temps, libellés en
   capitales espacées). Mais le HTML du conjugueur FR est INCHANGÉ : ce fichier
   cible donc les classes FR existantes (.modesup / .mode / .temps / .personne…)
   au lieu des classes anglaises (.conj / .mood / .tense…).

   Tout ce qui n'est PAS la fiche (barre de recherche .englobe, autocomplétion
   jQuery UI, titres, .sens-heading, canvas WebGL, états) est conservé À
   L'IDENTIQUE de la version précédente.

   Une sauvegarde de l'ancien style complet est disponible : conjugueur-old.css.
   Pour revenir en arrière, il suffit de recharger l'ancien fichier (ou de
   repointer la constante CSS_CONJUGUEUR dessus).
   ========================================================================= */

/* 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 / BARRE DE RECHERCHE / AUTOCOMPLÉTION — CONSERVÉ À L'IDENTIQUE
   (repris tel quel de conjugueur-old.css : ne pas restyler, c'est la barre
   jQuery UI commune et le canvas WebGL.)
   ========================================================================= */
/* Pas de font-family ici : on laisse la pile Inter du site (critical.php) s'appliquer. */
body,html{margin:0;padding:0;height:100%;width:100%;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}
.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;margin:0 auto;width:100%}
.englobe-wrapper{max-width:680px;margin:30px auto;display:flex;flex-direction:column;align-items:center}
@media (max-width:600px){.englobe-wrapper{max-width:calc(100% - 20px)}}
.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;background:0 0;box-sizing:border-box;overflow:visible;border-radius:999px;justify-content:center;align-items:center;margin:auto;display:inline-block;color:#000}
.englobe.ouverte{width:100%;border-radius:30px}
.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}
.englobe .barre:focus,.englobe .barre:focus-visible{outline:none!important;box-shadow:none!important}
.autocomplete-menu{width:40vw;box-sizing:border-box;overflow-x:hidden;overflow-y:hidden;border:none!important}
.typed{color:#000}
.suggested{color:#555;font-weight:700}
.ui-menu .ui-menu-item-wrapper.ui-state-active .typed,.ui-menu .ui-menu-item-wrapper:hover .typed{color:#000!important;font-weight:700!important}
.ui-menu .ui-menu-item-wrapper.ui-state-active .suggested,.ui-menu .ui-menu-item-wrapper:hover .suggested{color:#000!important}
.ui-autocomplete{max-width:100%;position:static!important;z-index:5;box-shadow:none!important;max-height:none!important;overflow-y:visible!important;background-color:transparent;border:none!important}
.ui-autocomplete,.ui-autocomplete *{background:0 0!important;border:none!important;box-shadow:none!important;text-align:left}
.englobe .ui-autocomplete{position:absolute;left:0;z-index:1000;width:calc(100% - 2px);background-color:transparent;border:none;border-radius:0 0 4px 4px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:0;list-style:none;margin:0;box-sizing:border-box}
.englobe .ui-autocomplete,.englobe .ui-autocomplete li{margin:0;padding:0}
.englobe .ui-autocomplete .fr{background-color:#6fa9cc!important;color:#fff;font-weight:700;padding:2px 5px;border-radius:3px}
.englobe .ui-autocomplete .en{background-color:#036!important;color:#fff;font-weight:700;padding:2px 5px;border-radius:3px}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.englobe .ui-autocomplete li{opacity:0;animation:fadeSlideIn .3s ease forwards}
.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;transform:rotate(45deg);transform-origin:left center;top:3px;left:2px;border-radius:1px}
.entete{display:none}
.outil,main>h1.page-title{text-align:center;font-family:var(--font-display);font-weight:700;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}
@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}

.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}

/* Masquage du texte de la barre quand la loupe est repliée (conservé). */
.englobe:not(.ouverte) .barre{color:transparent}
.englobe:not(.ouverte) .barre::placeholder{color:transparent}
.barre,.barre::placeholder{transition:color .4s ease}

/* =========================================================================
   2. FICHE DE CONJUGAISON — LOOK ANGLAIS appliqué aux classes FR.

   Mapping HTML FR -> rôle :
     .page-subtitle        titre (verbe + groupe)        [si showHeading]
     .modesup/.text-modesup  VOIX (Actif/Passif/Pronominal)
     .mode/.text-mode        MODE (Indicatif, Subjonctif…)
     .temps/.text-temps      TEMPS (présent, imparfait…)
     .personne-container     conteneur d'une forme
     .personne               une forme conjuguée
   ========================================================================= */

/* Palette « papier / encre » (identique à la fiche anglaise). */
main{
  --ink:#1a1a2e;
  --paper:#fbfaf7;
  --rule:#e2ddd3;
  --amber:#9a6a3c;
  --slate:#3d5a73;
  --verdigris:#4a6552;
  --muted:#8a8478;
}

/* Titre de la fiche (verbe + groupe). On neutralise l'ancien style centré
   orange au profit d'un titre « fiche de référence ». */
main>h2.page-subtitle{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--ink);
  text-align:left;
  text-transform:none;
  letter-spacing:-0.01em;
  max-width:1100px;
  margin:1.5rem auto 2rem;
  padding:0 1.25rem 1rem;
  border-bottom:2px solid var(--ink);
  position:relative;
  z-index:10;
}

/* VOIX : grand bloc « papier » qui regroupe tous les modes de la voix. */
.modesup{
  /* Fond légèrement translucide + flou, identique à la fiche anglaise : laisse
     transparaître l'animation de vagues WebGL derrière, tout en restant lisible.
     Les cartes de temps (.temps) restent opaques (blanc plein) par-dessus. */
  background:rgba(251,250,247,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--rule);
  border-radius:14px;
  max-width:1100px;
  margin:0 auto 2rem;
  padding:1.5rem 1.5rem 2rem;
  position:relative;
  z-index:10;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.text-modesup{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--ink);
  margin:0 0 1.25rem;
  padding-bottom:.4rem;
  border-bottom:2px solid var(--ink);
  display:block;
  text-align:left;
}

/* MODE : titre de section + grille de cartes de temps. */
.mode{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  margin:0 0 2rem;
  /* La grille interne aligne les cartes de temps (.temps). */
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:1.25rem 1.75rem;
  min-width:0!important;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.text-mode{
  /* Le titre du mode occupe toute la largeur de la grille. */
  grid-column:1/-1;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--slate);
  margin:.5rem 0 .25rem;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--rule);
  text-align:left;
}

/* TEMPS : carte claire. */
.temps{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:.9rem 1rem 1rem;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.text-temps{
  font-family:var(--font-text);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  text-align:left;
  margin:0 0 .6rem;
}

/* PERSONNES : liste verticale de formes. */
.personne-container{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.personne{
  color:var(--ink);
  font-family:var(--font-text);
  font-size:.95rem;
  padding:2px 0;
  text-align:left;
}

/* Sous-titre de sens (verbes à entrées multiples). Conservé, ré-harmonisé. */
.sens-heading{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--ink);
  max-width:1100px;
  margin:2rem auto .6rem;
  padding:0 1.25rem .3rem;
  border-bottom:2px solid #1f7cff;
  text-transform:none;
  position:relative;
  z-index:10;
  scroll-margin-top:90px;
}
.sens-heading::first-letter{text-transform:uppercase}
.sens-heading:target{animation:sensTargetFlash 1.6s ease-out 1}
@keyframes sensTargetFlash{0%{background:rgba(31,124,255,.18)}100%{background:transparent}}

@media (max-width:480px){
  .mode{grid-template-columns:1fr;gap:1rem}
  .modesup{padding:1.25rem 1rem 1.5rem;margin:0 10px 1.5rem}
  main>h2.page-subtitle{margin:1rem 10px 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .englobe .ui-autocomplete li{animation:none;opacity:1}
  .sens-heading:target{animation:none}
}