/* ============================================
   ITBS — page de présentation d'Ahmed Ben Taleb : ahmed-ben-taleb/index.html (français) et
   ahmed-ben-taleb/en/index.html (anglais). Reprend les couleurs et la police de css/style.css et la
   barre du haut de css/pfe.css ; cartes plates, sans ombre. Aucun programme : tout est en HTML et CSS.
   Style d'impression en fin de fichier : la page s'imprime comme un CV.
   Après une modification de ce fichier, changer son ?v= dans les deux pages.
   ============================================ */
:root {
  --encre: #111827;
  --texte: #374151;
  --discret: #6B7280;
  --accent: #4F46E5;
  --accent-fonce: #4338CA;
  --accent-clair: #EEF2FF;
  --or: #D4A843;
  --or-clair: #E8D5A0;
  --bord: #E5E7EB;
  --fond: #FFFFFF;
  --fond-alt: #F9FAFB;
  --rayon: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.6;
  font-size: 16px;
}
a { color: var(--accent); }
h1, h2, h3, h4, h5 { color: var(--encre); line-height: 1.25; }
:focus-visible { outline: 3px solid #A5B4FC; outline-offset: 2px; }
sup { font-size: .68em; line-height: 0; }

.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.evitement:focus { top: 12px; }

/* ---- Barre du haut : logo, rubriques, langue, retour au site ---- */
.barre { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.barre-contenu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; min-height: 64px; }
.logo img { height: 40px; width: auto; display: block; }
.sections { justify-self: end; display: flex; align-items: center; gap: 20px; }
.sections a { color: var(--texte); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.sections a:hover { color: var(--accent); }
.barre-actions { display: flex; align-items: center; gap: 12px; }
.langue { display: inline-grid; place-items: center; min-width: 42px; height: 36px; padding: 0 10px; border: 1.5px solid var(--bord); border-radius: 8px; color: var(--encre); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-decoration: none; }
.langue:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Boutons ---- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bouton-petit { padding: 8px 14px; font-size: 14px; }
.bouton-contour { background: #fff; color: var(--accent); border-color: var(--accent); }
.bouton-contour:hover { background: var(--accent-clair); }
.bouton-plein { background: var(--accent); color: #fff; }
.bouton-plein:hover { background: var(--accent-fonce); }
.bouton-clair { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.bouton-clair:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.bouton-bloc { display: flex; width: 100%; margin-top: 18px; }

/* ---- En-tête : identité à gauche, fonctions à droite ---- */
.hero {
  position: relative; overflow: hidden; padding: 64px 0 68px; color: #E0E7FF;
  background:
    radial-gradient(ellipse at 88% 0%, rgba(99,102,241,.45) 0%, transparent 55%),
    linear-gradient(135deg, #0B1023 0%, #1E1B4B 55%, #312E81 100%);
}
/* Trame de points discrète, côté droit */
.hero::after {
  content: ''; position: absolute; inset: 0 0 0 45%; pointer-events: none;
  background-image: radial-gradient(rgba(165,180,252,.2) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent); mask-image: linear-gradient(to left, #000 20%, transparent);
}
.hero-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-tete { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.avatar {
  width: 136px; height: 136px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%);
  border: 3px solid rgba(255,255,255,.9);
  color: #fff; font-weight: 800; font-size: 36px; letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: #A5B4FC; margin: 0 0 6px; font-size: 13px; }
.hero h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.titre-pro { margin: 0 0 20px; font-size: 19px; font-weight: 600; color: #fff; }
.titre-pro span { display: block; }
.titre-pro span + span { color: #C7D2FE; font-weight: 500; }
.mots-cles { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mots-cles li { border: 1px solid rgba(165,180,252,.5); background: rgba(255,255,255,.06); color: #E0E7FF; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.boutons-hero { display: flex; flex-wrap: wrap; gap: 12px; }
.lien-langue { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #C7D2FE; font-size: 15px; font-weight: 600; text-decoration: none; }
.lien-langue:hover { color: #fff; text-decoration: underline; }
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.roles li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(165,180,252,.28); }
.role-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(99,102,241,.35); color: #fff; font-size: 18px; }
.roles strong { display: block; color: #fff; font-size: 16px; line-height: 1.3; }
.roles div span { display: block; margin-top: 2px; color: #C7D2FE; font-size: 14px; }
.roles .role-vedette { border-color: rgba(232,213,160,.7); background: rgba(212,168,67,.12); }
.roles .role-vedette .role-icone { background: rgba(212,168,67,.4); }
.roles .role-vedette div span { color: var(--or-clair); font-weight: 700; letter-spacing: .06em; }
/* Direction du département : mise en avant indigo, avec ses missions sur une 3e ligne */
.roles .role-dep { border-color: rgba(165,180,252,.65); background: rgba(99,102,241,.18); }
.roles .role-dep .role-icone { background: #6366F1; }
.roles .role-missions { color: #fff; font-weight: 600; }

/* ---- Chiffres clés et références ---- */
.chiffres { background: var(--fond-alt); border-bottom: 1px solid var(--bord); padding: 28px 0 24px; }
.grille-chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.grille-chiffres li { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 14px 14px 12px; }
.grille-chiffres i { display: block; margin-bottom: 8px; color: var(--accent); font-size: 17px; opacity: .85; }
.grille-chiffres strong { display: block; color: var(--accent); font-size: 24px; font-weight: 800; line-height: 1.15; }
.grille-chiffres span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35; }
.confiance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.confiance-titre { margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--discret); white-space: nowrap; }
.confiance-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; flex: 1 1 560px; }
.confiance-liste li { font-weight: 700; font-size: 15px; color: #4B5563; white-space: nowrap; }
.confiance-liste li:not(:last-child)::after { content: '·'; margin: 0 10px; color: #A5B4FC; }

/* ---- Sections ---- */
.section { padding: 64px 0; }
.section-alt { background: var(--fond-alt); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.section-tete { max-width: 760px; margin-bottom: 28px; }
.etiquette { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.section h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; }
.section-tete p:not(.etiquette) { margin: 0; font-size: 17px; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; }
.carte h3 { margin: 0 0 6px; font-size: 20px; }

/* À propos, et ce pour quoi M. Ben Taleb peut intervenir */
.a-propos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.a-propos-texte p:not(.etiquette) { margin: 0 0 14px; font-size: 17.5px; color: var(--encre); }
.a-propos-texte strong { font-weight: 700; color: var(--encre); }
.interventions { border: 1.5px solid #C7D2FE; }
.interventions h3 { font-size: 18px; }
.langues { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--bord); font-size: 15px; font-weight: 600; color: var(--encre); }
.langues i { margin-right: 6px; color: var(--accent); }

/* Frise : direction à l'ITBS, formation et recherche */
.frise { list-style: none; margin: 0; padding: 0; position: relative; max-width: 860px; }
.frise::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--bord); }
.frise > li { position: relative; padding: 0 0 28px 38px; }
.frise > li:last-child { padding-bottom: 0; }
.frise > li::before { content: ''; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.frise > li.en-cours::before { background: var(--accent); }
.frise h3 { margin: 0 0 2px; font-size: 19px; }
.date { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent-clair); color: var(--accent-fonce); font-size: 13.5px; font-weight: 700; }
.lieu { margin: 0; font-weight: 600; color: var(--discret); }
.detail { margin: 6px 0 0; }
.distinction { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: #D1FAE5; color: #065F46; font-size: 13px; font-weight: 700; vertical-align: 2px; }
.puces { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces li { border: 1px solid var(--bord); background: #fff; border-radius: 999px; padding: 3px 12px; font-size: 14px; }
/* Missions du département, en cartes sous le poste de directeur */
.frise-large { max-width: none; }
.missions-dep { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.missions-dep li { background: #fff; border: 1.5px solid #C7D2FE; border-radius: 14px; padding: 18px 18px 16px; }
.missions-dep-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; background: var(--accent); color: #fff; font-size: 19px; }
.missions-dep h4 { margin: 0 0 4px; font-size: 17px; }
.missions-dep p { margin: 0; font-size: 15px; }

/* International : missions à l'étranger, avec leurs photos. La photo en hauteur occupe la colonne de gauche ;
   les deux autres gardent leur format 4:3, sans recadrage, pour ne pas couper les logos incrustés dans les images. */
.inter-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.inter-recit { margin: 12px 0 0; }
.inter-note { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: var(--accent-fonce); }
.inter-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; }
.inter-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inter-photo { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: var(--fond-alt); aspect-ratio: 4 / 3; }
.inter-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.inter-photo-seminaire { grid-column: 2; grid-row: 1; }
.inter-photo-campus { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.inter-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 10px; background: linear-gradient(180deg, rgba(17,24,39,0), rgba(17,24,39,.78)); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; }

/* Conseil et expertise */
.conseil { background: linear-gradient(180deg, var(--accent-clair) 0%, #fff 420px); border-top: 1px solid #E0E7FF; }
.conseil-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.carte-vedette { border: 1.5px solid #C7D2FE; }
.carte-vedette .lieu { font-size: 17px; color: var(--accent-fonce); }
.carte-or { border-color: var(--or); background: linear-gradient(180deg, #FFFBEB 0%, #fff 70%); }
.carte-or .lieu { color: #92400E; letter-spacing: .06em; }
.sous-titre { margin: 18px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--discret); }
.domaines-bloc { margin-bottom: 44px; }
.domaines-bloc .sous-titre { margin-top: 0; }
.domaines { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.domaines li { background: var(--accent-clair); color: var(--accent-fonce); border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 600; }
/* Appel à la fin de la rubrique, après les missions */
.appel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: 36px; padding: 28px 32px; background: #1E1B4B; border-color: #1E1B4B; color: #E0E7FF; }
.appel h3 { margin: 0 0 4px; color: #fff; font-size: 22px; }
.appel p { margin: 0; }
.appel-boutons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Missions, par année */
.titre-missions { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; }
.titre-missions h3 { margin: 0; font-size: 22px; }
.titre-missions p { margin: 0; color: var(--discret); font-weight: 600; }
.annee { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid #E0E7FF; }
.annee:first-child { border-top: 0; }
.annee-titre { position: sticky; top: 88px; align-self: start; margin: 0; font-size: 30px; font-weight: 800; line-height: 1; color: var(--accent); }
.missions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mission { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 16px 18px; transition: border-color .15s, transform .15s; }
.mission:hover { border-color: #A5B4FC; transform: translateY(-2px); }
.mission-haut { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; }
.type { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.type-formation { background: var(--accent-clair); color: var(--accent-fonce); }
.type-comite { background: #FEF3C7; color: #92400E; }
.type-atelier { background: #D1FAE5; color: #065F46; }
.type-webinaire { background: #E0F2FE; color: #075985; }
.type-seminaire { background: #F3E8FF; color: #6B21A8; }
.mission-date { font-size: 13.5px; font-weight: 600; color: var(--discret); }
.mission h5 { margin: 2px 0 0; font-size: 16px; }
.mission .role { margin: 0; font-size: 14.5px; }
.mission .pays { margin: auto 0 0; padding-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--discret); }
.mission .pays i { margin-right: 4px; color: var(--accent); }

/* Certifications */
.certifs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.certif { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 16px; }
.certif-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-clair); color: var(--accent); font-size: 19px; }
.certif-texte strong { display: block; color: var(--encre); font-size: 15.5px; line-height: 1.3; }
.certif-texte span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--discret); }

/* Cours enseignés */
.cours-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cours-grille h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 18px; }
.cours-grille h3 i { color: var(--accent); }
.compte { margin-left: auto; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent-clair); color: var(--accent-fonce); font-size: 13px; font-weight: 700; }
.liste-cours { list-style: none; margin: 0; padding: 0; }
.liste-cours li { padding: 9px 0; border-top: 1px solid var(--bord); }
.liste-cours li:first-child { padding-top: 0; border-top: 0; }
.liste-cours strong { display: block; color: var(--encre); font-size: 15px; font-weight: 600; }
.liste-cours span { display: block; font-size: 13.5px; color: var(--discret); }

/* Engagements et contact */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.liste-icones { list-style: none; margin: 12px 0 0; padding: 0; }
.liste-icones li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 7px 0; }
.liste-icones i { color: var(--accent); margin-top: 5px; text-align: center; }
.liste-icones a { font-weight: 600; overflow-wrap: anywhere; }

/* ---- Pied ---- */
.pied { background: #111827; color: #9CA3AF; padding: 32px 0; font-size: 14px; }
.pied-contenu { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.pied p { margin: 0; }
.pied a { color: #C7D2FE; }
.haut { font-weight: 600; text-decoration: none; white-space: nowrap; }
.haut:hover { text-decoration: underline; }

/* ---- Responsive : points de rupture du site (1024 / 768 / 480) ---- */
@media (max-width: 1024px) {
  /* Les rubriques passent sur une seconde ligne qui défile à l'horizontale. */
  html { scroll-padding-top: 124px; }
  .barre-contenu { grid-template-columns: auto auto; grid-template-areas: "logo actions" "sections sections"; row-gap: 0; min-height: 0; padding-top: 10px; }
  .logo { grid-area: logo; }
  .barre-actions { grid-area: actions; justify-self: end; }
  .sections { grid-area: sections; justify-self: stretch; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 10px -24px 0; padding: 0 24px 10px; }
  .sections::-webkit-scrollbar { display: none; }
  .sections a { flex: none; padding: 6px 14px; border: 1px solid var(--bord); border-radius: 999px; background: #fff; font-size: 14px; }
  .hero-grille { grid-template-columns: 1fr; gap: 28px; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-propos { grid-template-columns: 1fr; gap: 24px; }
  .annee { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .annee-titre { top: 132px; font-size: 24px; }
  .missions, .certifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cours-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cours-grille > :last-child { grid-column: 1 / -1; }
  .inter-grille { grid-template-columns: 1fr; gap: 20px; }
  .inter-photos { max-width: 760px; }
}
@media (max-width: 768px) {
  .conteneur { padding: 0 16px; }
  .sections { margin: 10px -16px 0; padding: 0 16px 10px; }
  .hero { padding: 32px 0 40px; }
  .hero-tete { gap: 16px; margin-bottom: 14px; }
  .avatar { width: 76px; height: 76px; font-size: 25px; border-width: 2px; }
  .titre-pro { font-size: 17px; }
  .roles { grid-template-columns: 1fr; }
  .grille-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 44px 0; }
  .conseil-grille, .duo, .cours-grille { grid-template-columns: 1fr; }
  .cours-grille > :last-child { grid-column: auto; }
  /* Une mission par ligne : l'icône passe à gauche du texte */
  .missions-dep { grid-template-columns: 1fr; gap: 10px; }
  .missions-dep li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; }
  .missions-dep-icone { grid-row: span 2; margin-bottom: 0; }
  .appel { padding: 24px 20px; }
  .annee { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .annee-titre { position: static; font-size: 22px; }
}
@media (max-width: 480px) {
  .barre-actions { gap: 8px; }
  .barre-actions .bouton span { display: none; }
  .boutons-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .boutons-hero .bouton { padding: 12px 10px; }
  .appel-boutons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .appel-boutons .bouton { padding: 12px 10px; }
  .grille-chiffres strong { font-size: 21px; }
  .missions, .certifs { grid-template-columns: 1fr; }
  .carte { padding: 20px; }
  /* Une photo par ligne ; celle en hauteur est raccourcie par le bas. */
  .inter-photos { grid-template-columns: 1fr; }
  .inter-photo-seminaire, .inter-photo-campus { grid-column: auto; grid-row: auto; }
  .inter-photo-campus { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .mission:hover { transform: none; }
}

/* ---- Impression : un CV sur fond blanc. Les fonds colorés ne s'impriment pas par défaut ;
   rien ne doit donc reposer dessus (texte des initiales, pastilles). ---- */
@media print {
  @page { margin: 14mm; }
  html { scroll-padding-top: 0; }
  body { font-size: 10.5pt; color: #000; }
  .barre, .evitement, .boutons-hero, .lien-langue, .appel, .pied, .bouton-bloc, .role-icone, .missions-dep-icone, .inter-photos, .inter-lien { display: none !important; }
  .hero::after { display: none; }
  .conteneur { max-width: none; padding: 0; }
  .hero { padding: 0 0 5mm; background: none; color: #000; border-bottom: 2px solid #4F46E5; }
  .hero-grille { grid-template-columns: 1fr; gap: 4mm; }
  .avatar { width: 22mm; height: 22mm; font-size: 16pt; background: none; border: 2px solid #4F46E5; color: #4F46E5; }
  .hero h1, .titre-pro, .titre-pro span + span, .roles strong { color: #000; }
  .surtitre, .roles div span, .roles .role-vedette div span { color: #333; }
  .roles .role-missions { color: #000; }
  .missions-dep li { border: 1px solid #9CA3AF; padding: 3mm; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2mm; }
  .roles li { grid-template-columns: 1fr; padding: 2mm 3mm; background: none; border: 1px solid #9CA3AF; }
  .mots-cles { margin-bottom: 0; }
  .mots-cles li { border-color: #9CA3AF; background: none; color: #000; }
  .chiffres, .section, .section-alt, .conseil { padding: 4mm 0; background: none; border: 0; }
  .grille-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conseil-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4mm; }
  .carte-or { background: none; }
  .annee { grid-template-columns: 18mm minmax(0, 1fr); padding: 3mm 0; }
  .annee-titre { position: static; font-size: 16pt; }
  .missions, .certifs, .cours-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cours-grille > :last-child { grid-column: 1 / -1; }
  .a-propos, .duo, .inter-grille { grid-template-columns: 1fr; gap: 4mm; }
  .date, .domaines li, .distinction, .type, .compte { background: none; border: 1px solid #9CA3AF; color: #000; }
  .grille-chiffres li, .carte, .mission, .certif, .frise > li, .roles li, .missions-dep li { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }
  a { color: #000; text-decoration: none; }
}