/* ConjuGrid Lite — CSS public */
.conjugrid-container { max-width: 980px; margin: 0 auto; padding: 1rem; }
.conjugrid-title { margin: .2rem 0 .6rem; font-size: 2rem; line-height: 1.2; }
.conjugrid-meta { margin-bottom: .8rem; }
.cglite-badge { display:inline-block; background:#f3f4f6; border:1px solid #e5e7eb; padding:2px 8px; border-radius:999px; font-size:.85rem; margin-right:.35rem; }
.conjugrid-block h2 { margin: 16px 0 6px; font-size: 1.25rem; }
.conjugrid-block h3 { margin: 10px 0 4px; font-size: 1.05rem; }
.conjugrid-block .cglite-forms { margin-bottom: 8px; }
.conjugrid-report { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; }
.conjugrid-public-notice { margin: .5rem 0 1rem; padding: .75rem 1rem; background:#fff8e1; border:1px solid #fde68a; border-radius:6px; }
.conjugrid-public-notice p {font-size: 0.95rem; margin-bottom: 10px;}



/* ====== titre notice (si présent) ====== */
/* =================================== */
/* =================================== */


.list-verb .conjugrid-public-notice {
 --accent: #1b6da0;
  --ink: #0f172a;
  --ink-sub: #334155;
  --panel-from: #d7f3ec;
  --panel-to: #ffffff;
  --line: rgba(0,0,0,.08);

  position: relative;
  margin-top: 1.4rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--panel-from) 30%, var(--panel-to) 80%);
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  overflow: hidden;
}

/* pastille décorative en angle (SVG inline) */
.list-verb .conjugrid-public-notice::after{
  content: "";
  position: absolute;
  top: -28px; right: -28px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,193,150,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(27,109,160,.10), transparent 65%);
  filter: blur(.3px);
  pointer-events: none;
}




/* ====== titres de lettres (A, B, C…) ====== */
/* =================================== */
/* =================================== */
.list-verb h2[id^="L"]{
  grid-column:1 / -1;        /* pleine largeur si parent en grid */
  margin:2rem 0 .75rem 0;
  padding-bottom:.4rem;
  border-bottom:2px solid #111;
  font-size:clamp(1.2rem,2.2vw,1.4rem);
  letter-spacing:.02em;
  scroll-margin-top: 80px;   /* confort si header sticky */
}
.list-verb h2[id^="L"]::after{
  content:""; display:block; height:3px; width:42px; margin-top:.5rem;
  background:#111; border-radius:2px;
}

/* ====== listes par lettre : 2 colonnes ====== */
.list-verb ul{
  list-style: none !important;
  padding-left: 0 !important;
 margin: 0 0 1.5rem 0 !important;

  display: flex;
  flex-wrap: wrap;
   gap: .6rem 1rem;
  align-items: flex-start;
}
/* Smartphones petits (≤480px) → 1 colonne */
@media (max-width: 700px){
  .list-verb ul{
    column-count: 1;
   gap: 0.3rem 0.4rem;
  }
}

/* items : texte nu, pas de box */
.list-verb ul > li{
  margin: 0;
  padding: 0 !important;
  list-style: none !important;
  flex: 0 0 auto;
}

/* certains thèmes dessinent des puces via ::marker / ::before */
.list-verb ul > li::marker{ content:""; }
.list-verb ul > li::before{ content:none !important; background:none !important; }
.list-verb ul,
.list-verb ul > li{ background-image:none !important; }

.list-verb ul > li > a{
  display: block;
  position: relative;
  padding: .9rem 1.8rem .9rem 1.8rem;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
  color: #111827;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;

  width: fit-content;
  max-width: 100%;
}

.list-verb ul > li > a::before{
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 5px;
  width: 5px;
  border-radius: 8px;
  background: linear-gradient(180deg, #db0310 0%, #ff6b6b 100%);
}

  /*.list-verb ul > li > a::after{
  content: "→";
  position: absolute;
 right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: .45;
  transition: transform .18s ease, opacity .18s ease;
}
*/

.list-verb ul > li > a:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: rgba(219,3,16,.22);
  color: #8b0000;
  text-decoration: none;
}

.list-verb ul > li > a:hover::after{
  opacity: .9;
  transform: translateY(-50%) translateX(3px);
}

.list-verb ul > li:nth-child(4n+1) > a::before{
  background: linear-gradient(180deg, #db0310 0%, #ff7a7a 100%);
}
.list-verb ul > li:nth-child(4n+2) > a::before{
  background: linear-gradient(180deg, #1b6da0 0%, #51a7d9 100%);
}
.list-verb ul > li:nth-child(4n+3) > a::before{
  background: linear-gradient(180deg, #00c196 0%, #61e0bf 100%);
}
.list-verb ul > li:nth-child(4n+4) > a::before{
  background: linear-gradient(180deg, #f59e0b 0%, #ffd166 100%);
}

@media (max-width: 640px){
  .list-verb ul > li > a{
    padding: .9rem .95rem .9rem 1rem;
    font-size: .98rem;
  }
}



/* ===== ConjuGrid — fiche verbe ===== */
/* =================================== */
/* =================================== */



/******************************
 * Conjugrid — style modernisé
 * (accent webpratique.ch)
 ******************************/

/* Scope facultatif : si tu veux limiter le style à une zone,
   entoure ton bloc avec <div class="conjugrid-scope">… */
.conjugrid-scope {}

/* ===== Variables & base ===== */
.conjugrid-scope,
.conjugrid-block {
  --accent: #db0310;           /* rouge webpratique.ch */
  --ink-900: #0b0e11;
  --ink-800: #111827;
  --ink-700: #374151;
  --ink-600: #4b5563;
  --line: rgba(0,0,0,.08);
  --card: #fff;
  --muted: rgba(0,0,0,.55);

  --radius-lg: 14px;
  --radius-md: 10px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --shadow-2: 0 6px 20px rgba(17,24,39,.08);
}

/* ===== Grille 2 colonnes ===== */
.conjugrid-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.6rem;                       /* vertical / horizontal */
  align-items: start;
}

/* 1 colonne sous 900px */
@media (max-width: 900px) {
  .conjugrid-block { grid-template-columns: 1fr; }
}

/* ===== Titre de section (Indicatif, Subjonctif…) ===== */
.conjugrid-block > h2 {
  grid-column: 1 / -1;
  margin: 1.4rem 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  letter-spacing: .01em;
  color: var(--ink-800);
  position: relative;
}

.conjugrid-block > h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: .5rem;
}

/* ===== Carte “temps” =====
   (tu as mis <div class="cgl-tense-block"><h3>…</h3> lignes…</div>) */
.cgl-tense-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: .95rem 1.05rem .9rem;
  line-height: 1.6;
  font-size: .98rem;
  color: var(--ink-800);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Hover léger (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .cgl-tense-block:hover {
    border-color: rgba(0,0,0,.12);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
  }
}

/* ===== Titre du temps (à l’intérieur de la carte) ===== */
.cgl-tense-block > h3 {
  margin: 0 0 .55rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-700);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

/* Petit filet coloré à gauche pour ancrer visuellement */
.cgl-tense-block > h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-1px);
}

/* Micro-rythme entre lignes (tu utilises <br>) */
.cgl-tense-block br { line-height: 1.05; }

/* Espacement cohérent entre cartes */
.conjugrid-block .cgl-tense-block { margin-top: .15rem; }

/* ===== Titre principal + badges (si présents) ===== */
.conjugrid-title {
  margin: 0 0 .35rem;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  color: var(--ink-900);
}

.conjugrid-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: 0 0 1.1rem;
}

.cglite-badge {
  display: inline-block;
  padding: .28rem .55rem;
  font-size: .82rem;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink-700);
  white-space: nowrap;
}

/* Accent possible sur un badge (ex: “Aux. avoir”) */
.cglite-badge.is-accent {
  border-color: rgba(219,3,16,.25);
  background: rgba(219,3,16,.06);
  color: var(--accent);
}

/* ===== Accessibilité : focus visibles ===== */
.cgl-tense-block:focus-within {
  outline: 2px solid color-mix(in oklab, var(--accent) 60%, white);
  outline-offset: 2px;
}

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark) {
  .conjugrid-block {
    --ink-900: #f2f4f7;
    --ink-800: #e8eaee;
    --ink-700: #d2d7df;
    --ink-600: #c3c9d3;
    --line: rgba(255,255,255,.12);
    --card: #17191c;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 8px 28px rgba(0,0,0,.45);
  }
  .conjugrid-block > h2 { border-bottom-color: var(--line); color: var(--ink-800); }
  .cgl-tense-block { color: var(--ink-800); }
  .cglite-badge { background: #1b1e22; color: var(--ink-700); border-color: var(--line); }
}

/* ===== Réduction des animations si l’utilisateur préfère ===== */
@media (prefers-reduced-motion: reduce) {
  .cgl-tense-block { transition: none; }
}

/* ===== Impression (compacte) ===== */
@media print {
  .conjugrid-block {
    grid-template-columns: 1fr 1fr;
    gap: .6rem .8rem;
  }
  .cgl-tense-block {
    box-shadow: none;
    border-color: #ccc;
    background: #fff;
  }
}






/* Bouton invisible mais accessible (Enter fonctionne) */
.conjugrid-sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}

/* Lien en pied — clair sur fond dégradé */
.conjugrid-links{ text-align: right; padding-right:30px;padding-bottom:15px;}
.conjugrid-links a{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.conjugrid-links a:hover{ text-decoration: none; }

/* Responsive */
@media (max-width: 640px){
  .conjugrid-search-widget{ flex-direction: column; }
}


/* Supprimer le style "carte blanche" imposé par le thème
   uniquement pour le widget ConjuGrid */
.widget[id^="conjugrid_widget-"] {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  
  box-shadow: none !important;
  position: static !important;
}


/* --------------Insight ---------------------------------------------------- */
/* ===== Ciblage ultra-sélectif pour l'HTML fourni ===== */

/* Conteneur */
.conjugrid-insight{
  position: relative;
  margin-top: 1.4rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 60%);
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Pastille décorative */
.conjugrid-insight::after{
  content: "";
  position: absolute;
  top: -28px; right: -28px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(219,3,16,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(219,3,16,.08), transparent 65%);
  filter: blur(.3px);
  pointer-events: none;
}

/* Header */
.conjugrid-insight > .cgi-header > .cgi-kicker{
  display: inline-block;
  padding: .18rem .5rem;
  font: 700 .8rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #db0310;
  background: rgba(219,3,16,.08);
  border: 1px solid rgba(219,3,16,.22);
  border-radius: 999px;
  margin: 0 0 .8rem;
}
.conjugrid-insight > .cgi-header > .cgi-title{
  margin: 0 0 .25rem;
  font-size: 1.3rem;     /* h2 (desktop) */
  line-height: 1.2;
  color: #0f172a;
  font-weight: 800;
}
.conjugrid-insight > .cgi-header > .cgi-sub{
  margin: 0 0 .8rem;
  color: #334155;
  line-height: 1.55;
}

/* Grille 2→1 colonnes */
.conjugrid-insight > .cgi-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem 1.25rem;
  align-items: start;
  margin-top: .4rem;
}

/* ===== Titres h3 dans les différentes sections ===== */
/* (grille, colonne ou corps de texte) */
.conjugrid-insight > .cgi-grid > .cgi-col > h3,
.conjugrid-insight .cgi-col > h3,
.conjugrid-insight .cgi-body > h3{
  margin: .25rem 0 .35rem;
  font-size: 1.15rem;    /* desktop */
  line-height: 1.25;
  color: #0f172a;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-weight: 700;
}

/* Pastille rouge */
.conjugrid-insight > .cgi-grid > .cgi-col > h3::before,
.conjugrid-insight .cgi-col > h3::before,
.conjugrid-insight .cgi-body > h3::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #db0310;
  transform: translateY(-1px);
}

/* ===== Variante responsive ===== */
@media (max-width: 820px){
  .conjugrid-insight > .cgi-grid > .cgi-col > h3,
  .conjugrid-insight .cgi-col > h3,
  .conjugrid-insight .cgi-body > h3{
    font-size: 1rem;
    line-height: 1.3;
    gap: .4rem;
  }
}


/* ===== Titres h3 placés directement dans .conjugrid-insight ===== */
.conjugrid-insight > h3{
  margin: .25rem 0 .35rem;
  font-size: 1.15rem;   /* desktop */
  line-height: 1.25;
  color: #0f172a;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-weight: 700;
}
.conjugrid-insight > h3::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #db0310;  /* pastille rouge */
  transform: translateY(-1px);
}

/* Un petit confort de lecture : paragraphe qui suit un h3 direct */
.conjugrid-insight > h3 + p{
  margin-top: .15rem;
}

/* ===== Responsive ===== */
@media (max-width: 820px){
  .conjugrid-insight > h3{
    font-size: 1rem;    /* mobile */
    line-height: 1.3;
    gap: .4rem;
  }
}




/* Paragraphe, emphase, exposant */
.conjugrid-insight > .cgi-grid > .cgi-col > p{
  margin: 0 0 .75rem;
  color: #334155;
}
.conjugrid-insight em{ font-style: italic; }
.conjugrid-insight sup{ font-size: .72em; }

/* Liste d’exemples */
.conjugrid-insight > .cgi-grid > .cgi-col > .cgi-ex{
  margin: .1rem 0 .75rem 1.1rem;
  padding: 0;
}
.conjugrid-insight > .cgi-grid > .cgi-col > .cgi-ex > li{
  margin: .25rem 0;
  color: #334155;
}

/* Footer */
.conjugrid-insight > .cgi-footer{
  margin-top: .6rem;
  padding-top: .7rem;
  border-top: 1px dashed rgba(0,0,0,.08);
}
.conjugrid-insight > .cgi-footer > .cgi-note{
  margin: 0;
  font-size: .95rem;
  color: #334155;
}

/* Liens */
.conjugrid-insight a{
  color: #db0310;
  text-decoration: none;
}
.conjugrid-insight a:hover{
  text-decoration: underline;
}

/* ===== Responsive ciblé ===== */
@media (max-width: 820px){
  .conjugrid-insight > .cgi-grid{
    grid-template-columns: 1fr;
  }
  .conjugrid-insight > .cgi-header > .cgi-title{
    font-size: 1.25rem;  /* h2 mobile */
  }
  .conjugrid-insight > .cgi-grid > .cgi-col > h3{
    font-size: 1rem;     /* h3 mobile */
  }
}

/* ===== Paragraphes à l'intérieur de .cgi-body ===== */
.conjugrid-insight .cgi-body p, .conjugrid-insight .cgi-header p{
  margin-bottom: 0.55rem;   /* au lieu de ~0.75rem */
  line-height: 1.5;         /* garde une bonne lisibilité */
}

/* Un peu moins d'espace après les h3 dans .cgi-body */
.conjugrid-insight .cgi-body h3, .conjugrid-insight .cgi-header h3{
  margin-bottom: 0.25rem;
}





/* --------------Fin Insight ---------------------------------------------------- */





/* mode sombre */
@media (prefers-color-scheme: dark){
  .conjugrid-insight{
    --ink: #e5e7eb;
    --ink-sub: #cbd5e1;
    --panel-from: #2a0f12;
    --panel-to: #181a1e;
    --line: rgba(255,255,255,.14);
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
  }
  .conjugrid-insight .cgi-kicker{
    background: rgba(219,3,16,.14);
    border-color: rgba(219,3,16,.35);
    color: #ffc9cd;
  }
}

.conjugrid-wrap {padding-top:1em;}









/* ====== navigation A→Z ====== */
.list-verb .cgl-letters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem .8rem;
  margin:0 0 1.5rem 0;
  padding:.5rem .75rem;
  background:#fafafa;
  border:1px solid #e0e0e0;
  border-radius:6px;
}

.list-verb .cgl-letters .cglite-letter{
  display:inline-block;
  min-width:2rem;
  text-align:center;
  font-weight:600;
  font-size: 1rem;
  line-height:1.6;
  color:#222;
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  padding:.25rem .4rem;
  transition:all .2s ease;
}

.list-verb .cgl-letters .cglite-letter:hover{
  color:#fff;
  background:#0073aa;   /* bleu WP */
  border-color:#0073aa;
  text-decoration:none;
}

.list-verb .cgl-letters .cglite-letter[style*="font-weight:700"]{
  background:#0073aa;
  border-color:#0073aa;
  color:#fff;
  text-decoration:none;
}

/* ====== responsive ====== */
@media (max-width: 600px){
  .list-verb .cgl-letters{
    justify-content:center;
    gap:.35rem .5rem;
    padding:.4rem;
  }
  .list-verb .cgl-letters .cglite-letter{
    min-width:1.8rem;
    font-size:.8rem;
    padding:.2rem .5rem;
  }
}


.cgl-search-form{
  display:flex; justify-content:center; gap:.5rem; margin:0 0 1.25rem 0;
}
.cgl-search-form input[type="text"]{
  flex:1 1 260px; padding:.45rem .6rem; border:1px solid #ccc; border-radius:4px; font-size:1rem;
}
.cgl-search-form button{
  padding:.5rem .9rem; background:#0073aa; color:#fff; border:0; border-radius:4px; font-weight:600; cursor:pointer;
}
.cgl-search-form button:hover{ background:#005d8f; }
@media (max-width:300px){
  .cgl-search-form{ flex-direction:column; align-items:stretch; }
  .cgl-search-form button{ width:100%; }
}



/* Conteneur horizontal pour les deux liens */
.back-links {
  display: flex;
  gap: 15px; /* espace entre les deux */
  margin: 20px 0;
}

/* Style commun (copie de .page-card-latest / .page-card) */
.back-links a {
  display: block;
  flex: 1; /* les deux prennent la même largeur */
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 15px;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 0 0 1px #0e3f7e0a,
              0 1px 1px -0.5px #2a33450a,
              0 3px 3px -1.5px #2a33460a,
              0 6px 6px -3px #2a33460a,
              0 12px 12px -6px #0e3f7e0a,
              0 24px 24px -12px #0e3f7e0a;
}

/* Spécifique au lien "Retour" */
.back-links .back-to-list {
  background: linear-gradient(90deg, #00c196 0%, #1b6da0 100%);
  color: #fff;
}

/* Spécifique au lien "Erreur" */
.back-links .report-error {
  background: linear-gradient(90deg, #db0310 0%, #a00000 100%);
  color: #fff;
}

/* Hover : léger lift + inversion dégradé */
.back-links a:hover {

}
.back-links .back-to-list:hover {
  background: linear-gradient(90deg, #1b6da0 0%, #00c196 100%);
  color: #fff;
}
.back-links .report-error:hover {
  background: linear-gradient(90deg, #a00000 0%, #db0310 100%);
  color: #fff;
}

/* ====== pagination prev/next (ConjuGrid) ====== */
.pagination-links-listecg a.prev-page,
.pagination-links-listecg a.next-page,
.pagination-links-listecg a.first-page,
.pagination-links-listecg a.last-page {
  display:inline-block;
  min-width:2rem;
  text-align:center;
  font-weight:600;
  font-size:1rem;
  line-height:1.6;
  color:#222;
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  padding:.25rem .4rem;
  transition:all .2s ease;
}

.pagination-links-listecg a.prev-page:hover,
.pagination-links-listecg a.next-page:hover,
.pagination-links-listecg a.first-page:hover,
.pagination-links-listecg a.last-page:hover {
  color:#fff;
  background:#0073aa;
  border-color:#0073aa;
  text-decoration:none;
}


.cgl-letters { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.cgl-letters .cgl-break { flex-basis: 100%; height: 0; }

.list-verb h2#LREGLES + ul{
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 1rem 0 1.5rem 0;
  padding: 0 !important;
}

.list-verb h2#LREGLES + ul > li{
  margin: 0;
  padding: 0 !important;
  list-style: none !important;
}


/* ===== Intro fiche verbe ===== */
.conjugrid-intro{
  --accent: #1b6da0;
  --ink: #0f172a;
  --ink-sub: #334155;
  --panel-from: #eef8f5;
  --panel-to: #ffffff;
  --line: rgba(0,0,0,.08);

  position: relative;
  margin: 1rem 0 1.4rem;
  padding: 1.1rem 1.2rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--panel-from) 20%, var(--panel-to) 82%);
  box-shadow: 0 6px 22px rgba(0,0,0,.05);
  color: var(--ink-sub);
  line-height: 1.65;
  font-size: 1rem;
  overflow: hidden;
}

/* liseré à gauche */
.conjugrid-intro::before{
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 5px;
  width: 5px;
  border-radius: 8px;
  background: linear-gradient(180deg, #00c196 0%, #1b6da0 100%);
}

/* pastille décorative */
.conjugrid-intro::after{
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,193,150,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(27,109,160,.10), transparent 65%);
  filter: blur(.3px);
  pointer-events: none;
}

/* mise en valeur du verbe */
.conjugrid-intro strong{
  color: var(--ink);
  font-weight: 800;
}

/* emphase grammaticale */
.conjugrid-intro em{
  font-style: italic;
  color: #0f3f5c;
}

/* espaces de guillemets et ponctuation déjà là, on sécurise juste la lisibilité */
.conjugrid-intro a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conjugrid-intro a:hover{
  text-decoration: none;
}

/* mobile */
@media (max-width: 640px){
  .conjugrid-intro{
    padding: 1rem 1rem 1.05rem 1.05rem;
    font-size: .97rem;
    line-height: 1.58;
  }
}

/* mode sombre */
@media (prefers-color-scheme: dark){
  .conjugrid-intro{
    --ink: #ecf3f8;
    --ink-sub: #d2dde6;
    --panel-from: #122028;
    --panel-to: #1a1d22;
    --line: rgba(255,255,255,.12);
    box-shadow: 0 8px 28px rgba(0,0,0,.42);
  }

  .conjugrid-intro strong{
    color: #ffffff;
  }

  .conjugrid-intro em{
    color: #9ed8ff;
  }
}



/* ===== Bloc information verbe (flags) ===== */
.conjugrid-flag-note{
  --accent: #1b6da0;
  --ink: #0f172a;
  --ink-sub: #334155;
  --panel-from: #eef8f5;
  --panel-to: #ffffff;
  --line: rgba(0,0,0,.08);

  position: relative;
  margin: 1rem 0 1.4rem;
  padding: 1.1rem 1.2rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--panel-from) 20%, var(--panel-to) 82%);
  box-shadow: 0 6px 22px rgba(0,0,0,.05);
  color: var(--ink-sub);
  line-height: 1.65;
  font-size: 1rem;
  overflow: hidden;
}

/* liseré à gauche */
.conjugrid-flag-note::before{
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 5px;
  width: 5px;
  border-radius: 8px;
  background: linear-gradient(180deg, #00c196 0%, #1b6da0 100%);
}

/* pastille décorative */
.conjugrid-flag-note::after{
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,193,150,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(27,109,160,.10), transparent 65%);
  filter: blur(.3px);
  pointer-events: none;
}

/* titre interne */
.conjugrid-flag-note strong{
  color: var(--ink);
  font-weight: 800;
}

/* liens */
.conjugrid-flag-note a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conjugrid-flag-note a:hover{
  text-decoration: none;
}

/* paragraphe interne */
.conjugrid-flag-note p{
  margin: 0;
}

/* mobile */
@media (max-width: 640px){
  .conjugrid-flag-note{
    padding: 1rem 1rem 1.05rem 1.05rem;
    font-size: .97rem;
    line-height: 1.58;
  }
}

/* mode sombre */
@media (prefers-color-scheme: dark){
  .conjugrid-flag-note{
    --ink: #ecf3f8;
    --ink-sub: #d2dde6;
    --panel-from: #122028;
    --panel-to: #1a1d22;
    --line: rgba(255,255,255,.12);
    box-shadow: 0 8px 28px rgba(0,0,0,.42);
  }

  .conjugrid-flag-note strong{
    color: #ffffff;
  }
}