/* [patch IL] Pages « Exemple de CV » (/exemple-cv/ et /exemple-cv/<slug>/). Classes ex- seulement :
   le Tailwind du site est purgé, une classe Tailwind absente du fichier compilé n'aurait aucun effet. */
.ex { --ex-encre: #111827; --ex-texte: #374151; --ex-doux: #6b7280; --ex-trait: #e5e7eb; --ex-vert: #15803d;
  --ex-vert-clair: #f0fdf4; --ex-violet: #6d28d9; --ex-papier: #ffffff;
  max-width: 1040px; margin: 0 auto; padding: 24px 16px 56px; color: var(--ex-texte); line-height: 1.6; }
.ex a { color: var(--ex-vert); }
.ex h1, .ex h2, .ex h3 { color: var(--ex-encre); line-height: 1.25; }
/* Le CSS de base du site retire les puces des listes : on les remet ici. */
.ex-puces, .ex-cv ul, .ex-erreurs, .ex-liens, .ex-autres { list-style: disc; }
.ex-puces li::marker, .ex-liens li::marker, .ex-autres li::marker { color: var(--ex-vert); }
.ex-erreurs li::marker { color: #b91c1c; }
.ex h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; }
.ex h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); font-weight: 800; margin: 0 0 16px; }
.ex h3 { font-size: 1.05rem; font-weight: 700; margin: 18px 0 6px; }
.ex-fil { font-size: .875rem; color: var(--ex-doux); margin-bottom: 18px; }
.ex-fil a { color: var(--ex-doux); text-decoration: none; }
.ex-fil a:hover { color: var(--ex-vert); }
.ex-fil span { color: var(--ex-texte); }

/* En-tête : texte + vraie image du PDF */
.ex-tete { display: grid; gap: 28px; align-items: start; margin-bottom: 44px; }
@media (min-width: 860px) { .ex-tete { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } }
.ex-tete-texte { min-width: 0; } /* les longs mots (adresses, « chauffeur-livreur ») ne débordent pas */
.ex-intro { font-size: 1.1rem; margin: 0 0 22px; max-width: 62ch; }
.ex-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ex-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  border-radius: 12px; background: var(--ex-violet); color: #fff !important; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px rgba(109, 40, 217, .22); }
.ex-bouton:hover { background: #5b21b6; }
.ex-bouton:focus-visible, .ex-faq summary:focus-visible, .ex a:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
.ex-bouton-second { background: #fff; color: var(--ex-violet) !important; border: 2px solid #ddd6fe; box-shadow: none; }
.ex-bouton-second:hover { background: #f5f3ff; }
.ex-bouton-vert { background: var(--ex-vert); box-shadow: 0 6px 16px rgba(21, 128, 61, .2); }
.ex-bouton-vert:hover { background: #166534; }
.ex-note { font-size: .9rem; color: var(--ex-doux); margin: 0; max-width: 60ch; }
.ex-feuille { margin: 0; justify-self: center; width: 100%; max-width: 380px; }
.ex-feuille img { display: block; width: 100%; height: auto; background: var(--ex-papier); border: 1px solid var(--ex-trait);
  border-radius: 6px; box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 18px 40px -12px rgba(17, 24, 39, .28); }
.ex-feuille figcaption { font-size: .8rem; color: var(--ex-doux); text-align: center; margin-top: 10px; }

/* Blocs */
.ex-bloc { margin: 0 0 44px; max-width: 760px; }
.ex-attentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ex-attentes li { display: grid; gap: 2px; padding: 14px 16px; border-left: 4px solid var(--ex-vert); background: #fff;
  border-radius: 0 10px 10px 0; }
.ex-attentes strong { color: var(--ex-encre); }

/* Texte du CV : présenté comme un document */
.ex-cv { background: var(--ex-papier); border: 1px solid var(--ex-trait); border-radius: 10px; padding: 22px 22px 18px; }
.ex-cv p { margin: 0 0 6px; }
.ex-cv h3 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ex-vert); margin: 18px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--ex-trait); }
.ex-cv-nom { font-size: 1.35rem; font-weight: 800; color: var(--ex-encre); }
.ex-cv-titre { font-weight: 600; }
.ex-cv-infos, .ex-cv-quand { color: var(--ex-doux); font-size: .9rem; }
.ex-cv-ligne { margin-bottom: 10px; }
.ex-cv ul { margin: 4px 0 0; padding-left: 20px; }
.ex-suite { margin-top: 16px; }

/* Accroches */
.ex-accroches { display: grid; gap: 12px; }
@media (min-width: 720px) { .ex-accroches { grid-template-columns: repeat(3, 1fr); } }
.ex-accroche { margin: 0; padding: 16px; background: #fff; border: 1px solid var(--ex-trait); border-radius: 12px; }
.ex-accroche p { margin: 0; }
.ex-situation { font-weight: 700; color: var(--ex-violet); margin-bottom: 6px !important; }

/* Compétences */
.ex-colonnes { display: grid; gap: 8px 32px; }
@media (min-width: 640px) { .ex-colonnes { grid-template-columns: 1fr 1fr; } }
.ex-colonnes h3 { margin-top: 0; }
.ex-puces { margin: 0; padding-left: 20px; }
.ex-puces li { margin-bottom: 4px; }

/* Avant / après */
.ex-avap { display: grid; gap: 14px; }
.ex-avap-ligne { display: grid; gap: 8px; }
@media (min-width: 640px) { .ex-avap-ligne { grid-template-columns: 2fr 3fr; } }
.ex-avant, .ex-apres { margin: 0; padding: 12px 14px; border-radius: 10px; }
.ex-avant { background: #fef2f2; color: #7f1d1d; }
.ex-apres { background: var(--ex-vert-clair); color: #14532d; }
.ex-avant span, .ex-apres span { display: block; font-size: .78rem; font-weight: 700; margin-bottom: 2px; }
.ex-petit { font-size: .9rem; color: var(--ex-doux); margin-top: 10px; }

/* Erreurs */
.ex-erreurs { margin: 0; padding-left: 20px; }
.ex-erreurs li { margin-bottom: 8px; }

/* À votre compte */
.ex-compte { background: var(--ex-vert-clair); border: 1px solid #bbf7d0; border-radius: 16px; padding: 22px 20px; }
.ex-liens { margin: 0 0 16px; padding-left: 20px; }
.ex-liens li { margin-bottom: 6px; }

/* Questions */
.ex-faq { background: #fff; border: 1px solid var(--ex-trait); border-radius: 10px; margin-bottom: 10px; }
.ex-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--ex-encre); list-style-position: inside; }
.ex-faq p { margin: 0; padding: 0 16px 14px; }

/* Autres exemples / page d'index */
.ex-autres { margin: 0; padding-left: 20px; columns: 2 220px; }
.ex-autres li { margin-bottom: 6px; break-inside: avoid; }
.ex-grille { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ex-carte { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ex-trait);
  border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ex-texte) !important; }
.ex-carte:hover { border-color: #86efac; box-shadow: 0 10px 24px -14px rgba(17, 24, 39, .35); }
.ex-carte img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--ex-trait); background: #f3f4f6; }
.ex-carte-texte { padding: 12px 14px 16px; }
.ex-carte-texte strong { display: block; color: var(--ex-encre); margin-bottom: 2px; }
.ex-carte-texte span { font-size: .9rem; color: var(--ex-doux); }