/* ------------------------------------------------------------------
   Mohamed Ali Elloumi — mini-site personnel
   Encre navy sur papier froid. Un seul accent : le teal du présent.
   ------------------------------------------------------------------ */

:root{
  --encre:#0F2C4C;
  --encre-clair:#33506E;
  --papier:#F7F9FA;
  --papier-creux:#EDF2F5;
  --teal:#0E8F8F;
  --teal-fonce:#0A6E6E;
  --filet:#D6E0E7;
  --gris:#5C6B78;
  --blanc:#FFFFFF;

  --large:72rem;
  --texte:34rem;

  --t-titre:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-corps:'Source Serif 4','Iowan Old Style',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--t-corps);
  font-size:1.0625rem;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--t-titre);
  font-variation-settings:'wdth' 112;
  font-weight:700;
  letter-spacing:-.005em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

a{color:var(--teal-fonce);text-decoration-thickness:1px;text-underline-offset:.18em;}
a:hover{color:var(--encre);}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:1px;
}

.evite{
  position:absolute;left:-9999px;top:0;
  background:var(--encre);color:var(--blanc);
  padding:.7rem 1.1rem;z-index:50;font-family:var(--t-titre);
}
.evite:focus{left:0;}

/* ----------------------------------------------------------- entete */
.entete{
  border-bottom:1px solid var(--filet);
  background:var(--papier);
  position:sticky;top:0;z-index:20;
}
.entete-in{
  max-width:var(--large);margin:0 auto;padding:.95rem 1.5rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.marque{text-decoration:none;color:var(--encre);}
.marque-nom{
  font-family:var(--t-titre);font-weight:700;font-size:1.02rem;
  font-variation-settings:'wdth' 118;letter-spacing:.005em;
}
.nav{display:flex;gap:1.35rem;align-items:baseline;flex-wrap:wrap;}
.nav a{
  font-family:var(--t-titre);font-size:.9rem;font-weight:500;
  font-variation-settings:'wdth' 105;
  color:var(--encre-clair);text-decoration:none;padding-bottom:.15rem;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--encre);border-bottom-color:var(--filet);}
.nav a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--teal);}
.nav-lang{
  color:var(--teal-fonce)!important;
  padding-left:1.1rem;border-left:1px solid var(--filet);
}

/* --------------------------------------------------------- structure */
.bloc-in,.bande-in,.hero-in{max-width:var(--large);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;}
.bloc{padding:4.5rem 0;}
.bande{padding:4.5rem 0;background:var(--papier-creux);border-block:1px solid var(--filet);}
.chapeau{padding:4rem 0 0;}
.colonne-texte{max-width:calc(var(--texte) + 3rem);margin-left:0;margin-right:auto;}
.colonne-texte p{max-width:var(--texte);}

.titre-page{font-size:clamp(2.4rem,6vw,3.6rem);font-variation-settings:'wdth' 108;}
.chapo{
  font-size:1.22rem;line-height:1.5;color:var(--encre-clair);
  margin-top:1.1rem;max-width:32rem;
}
.titre-section{
  font-size:.85rem;font-weight:600;font-variation-settings:'wdth' 100;
  letter-spacing:.02em;color:var(--gris);
  padding-bottom:.6rem;margin-bottom:2.2rem;
  border-bottom:1px solid var(--filet);
}
.titre-espace{margin-top:4rem;}
.note{
  margin-top:2.5rem;font-size:.95rem;color:var(--gris);
  max-width:var(--texte);font-style:italic;
}

/* -------------------------------------------------------------- hero */
.hero{padding:4.5rem 0 3rem;}
.hero-fonction{
  font-family:var(--t-titre);font-size:.92rem;font-weight:500;
  font-variation-settings:'wdth' 102;
  color:var(--gris);max-width:36rem;margin-bottom:1.4rem;line-height:1.45;
}
.hero-titre{
  font-size:clamp(2.35rem,6.4vw,4.15rem);
  font-variation-settings:'wdth' 106;
  font-weight:800;max-width:22ch;
}
.hero-sous{
  margin-top:1.5rem;max-width:var(--texte);
  font-size:1.14rem;line-height:1.58;color:var(--encre-clair);
}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem;}

.bouton{
  display:inline-block;
  font-family:var(--t-titre);font-size:.92rem;font-weight:600;
  font-variation-settings:'wdth' 104;
  background:var(--encre);color:var(--blanc);
  padding:.72rem 1.4rem;text-decoration:none;
  border:1px solid var(--encre);
  transition:background .16s ease,color .16s ease;
}
.bouton:hover{background:var(--teal-fonce);border-color:var(--teal-fonce);color:var(--blanc);}
.bouton-fin{background:transparent;color:var(--encre);}
.bouton-fin:hover{background:var(--encre);color:var(--blanc);border-color:var(--encre);}

.lien-fort{
  font-family:var(--t-titre);font-size:.9rem;font-weight:600;
  font-variation-settings:'wdth' 104;
  color:var(--teal-fonce);text-decoration:none;
  border-bottom:2px solid var(--teal);padding-bottom:.12rem;
}
.lien-fort:hover{color:var(--encre);border-bottom-color:var(--encre);}

/* ------------------------------------------------------------- frise */
.frise{margin:3.5rem auto 0;max-width:var(--large);padding:0 1.5rem;}
.frise-corps{position:relative;padding-left:15.5rem;}

/* la seule audace : le trait du présent */
.frise-corps::after{
  content:"";position:absolute;top:-.4rem;bottom:2.35rem;right:0;
  width:2px;background:var(--teal);
}

.piste{margin-bottom:1.15rem;}
.piste-titre{display:flex;flex-direction:column;position:absolute;left:0;width:14rem;}
.piste-nom{
  font-family:var(--t-titre);font-weight:700;font-size:.96rem;
  font-variation-settings:'wdth' 108;line-height:1.2;
}
.piste-role{font-size:.82rem;color:var(--gris);line-height:1.3;margin-top:.12rem;}
.piste-annees-etroit{display:none;}
.piste-rail{position:relative;height:2.55rem;}
.piste-barre{
  position:absolute;left:var(--x);width:var(--w);top:0;height:1.6rem;
  background:var(--encre);
  display:flex;align-items:center;
  transform:scaleX(0);transform-origin:left center;
  animation:deploie .62s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * 90ms + 140ms);
}
.piste-annees{
  font-family:var(--t-titre);font-size:.74rem;font-weight:500;
  font-variation-settings:'wdth' 100;
  color:var(--blanc);padding-left:.55rem;white-space:nowrap;
  opacity:0;animation:parait .4s ease forwards;
  animation-delay:calc(var(--i) * 90ms + 640ms);
}
@keyframes deploie{to{transform:scaleX(1);}}
@keyframes parait{to{opacity:1;}}

.frise-axe{
  position:relative;height:1.5rem;margin-top:.55rem;
  border-top:1px solid var(--filet);
}
.grad{
  position:absolute;left:var(--x);top:.42rem;
  font-family:var(--t-titre);font-size:.74rem;font-weight:500;
  font-variation-settings:'wdth' 100;
  color:var(--gris);transform:translateX(-50%);white-space:nowrap;
}
.grad:last-child{transform:translateX(-100%);color:var(--teal-fonce);font-weight:700;}

.frise-legende{
  margin-top:1.4rem;font-size:.88rem;color:var(--gris);
  padding-left:15.5rem;
}

/* ---------------------------------------------------------- chiffres */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.chiffre{border-top:3px solid var(--encre);padding-top:.9rem;}
.chiffre-v{
  display:block;font-family:var(--t-titre);font-weight:800;
  font-size:2.9rem;font-variation-settings:'wdth' 100;
  line-height:1;letter-spacing:-.02em;
}
.chiffre-l{display:block;margin-top:.55rem;font-size:.94rem;line-height:1.42;color:var(--encre-clair);}

/* ------------------------------------------------------------ portes */
.portes{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 3rem;}
.porte{border-top:1px solid var(--filet);padding-top:1.3rem;}
.porte h3{font-size:1.22rem;font-variation-settings:'wdth' 108;}
.porte p{margin:.7rem 0 1.2rem;font-size:1rem;color:var(--encre-clair);}

/* ------------------------------------------------------- experiences */
.xps{display:flex;flex-direction:column;}
.xp{
  display:grid;grid-template-columns:13rem 1fr;gap:2.5rem;
  padding:1.9rem 0;border-top:1px solid var(--filet);
}
.xp:first-child{border-top:none;padding-top:0;}
.xp-dates{display:flex;flex-direction:column;gap:.2rem;}
.xp-periode{
  font-family:var(--t-titre);font-size:.88rem;font-weight:600;
  font-variation-settings:'wdth' 104;color:var(--encre);
}
.xp-duree{font-size:.84rem;color:var(--gris);}
.xp-poste{font-size:1.32rem;font-variation-settings:'wdth' 106;}
.xp-societe{
  font-family:var(--t-titre);font-size:.95rem;font-weight:500;
  font-variation-settings:'wdth' 102;
  color:var(--teal-fonce);margin:.3rem 0 .75rem;
}
.xp-resume{color:var(--encre-clair);}
.xp-points{margin:.7rem 0 0;padding-left:1.1rem;}
.xp-points li{margin-bottom:.42rem;color:var(--encre-clair);}
.xp-points li::marker{color:var(--teal);}

/* ------------------------------------------------------- competences */
.comps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 2.5rem;}
.comp h3{font-size:1.05rem;font-variation-settings:'wdth' 106;}
.comp p{margin-top:.42rem;font-size:.96rem;color:var(--encre-clair);}

/* --------------------------------------------- formation, langues... */
.forms{display:flex;flex-direction:column;}
.form{
  display:grid;grid-template-columns:13rem 1fr;gap:2.5rem;
  padding:1.5rem 0;border-top:1px solid var(--filet);
}
.form:first-child{border-top:none;padding-top:0;}
.form-a{
  font-family:var(--t-titre);font-size:.88rem;font-weight:600;
  font-variation-settings:'wdth' 104;
}
.form h3{font-size:1.16rem;font-variation-settings:'wdth' 106;}
.form-e{color:var(--teal-fonce);margin:.28rem 0 .5rem;font-size:.96rem;}
.form p:not(.form-e){color:var(--encre-clair);font-size:.98rem;}

.langues{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.langue{border-top:1px solid var(--filet);padding-top:.85rem;}
.langue-l{
  display:block;font-family:var(--t-titre);font-weight:700;font-size:1.06rem;
  font-variation-settings:'wdth' 108;
}
.langue-n{display:block;font-size:.92rem;color:var(--gris);margin-top:.15rem;}

.engs{list-style:none;margin:0;padding:0;}
.engs li{
  padding:.85rem 0;border-top:1px solid var(--filet);
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline;
}
.engs li:first-child{border-top:none;}
.eng-r{
  font-family:var(--t-titre);font-weight:700;font-size:.98rem;
  font-variation-settings:'wdth' 106;
}
.eng-o{color:var(--encre-clair);}
.eng-a{color:var(--gris);font-size:.9rem;margin-left:auto;white-space:nowrap;}

/* ---------------------------------------------------------------- cas */
.cas-liste{display:flex;flex-direction:column;gap:0;}
.cas{
  display:grid;grid-template-columns:1fr 1.55fr;gap:3rem;
  padding:2.8rem 0;border-top:1px solid var(--filet);
}
.cas:first-child{border-top:none;padding-top:0;}
.cas-client{
  font-family:var(--t-titre);font-size:.88rem;font-weight:600;
  font-variation-settings:'wdth' 102;
  color:var(--teal-fonce);line-height:1.4;margin-bottom:.7rem;
}
.cas-titre{font-size:1.62rem;font-variation-settings:'wdth' 106;}
.cas-annee{
  font-family:var(--t-titre);font-size:.85rem;font-weight:500;
  color:var(--gris);margin-top:.7rem;
}
.cas-corps p{color:var(--encre-clair);}
.cas-resultat{
  color:var(--encre)!important;
  border-left:3px solid var(--teal);padding-left:1rem;margin-top:1.3rem;
}
.cas-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;
  margin:1.5rem 0 0;padding:0;
}
.cas-tags li{
  font-family:var(--t-titre);font-size:.78rem;font-weight:500;
  font-variation-settings:'wdth' 100;
  color:var(--gris);border:1px solid var(--filet);
  padding:.28rem .65rem;background:var(--blanc);
}

/* ------------------------------------------------------------ contact */
.coord{display:flex;flex-direction:column;max-width:44rem;}
.coord-l{
  display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;align-items:baseline;
  padding:1.15rem 0;border-top:1px solid var(--filet);
}
.coord-l:first-child{border-top:none;padding-top:0;}
.coord-k{
  font-family:var(--t-titre);font-size:.86rem;font-weight:600;
  font-variation-settings:'wdth' 102;color:var(--gris);
}
.coord-v{font-size:1.08rem;}
.coord-v-grand{
  font-family:var(--t-titre);font-size:clamp(1.3rem,3.4vw,1.85rem);font-weight:700;
  font-variation-settings:'wdth' 106;
  color:var(--encre);text-decoration:none;
  border-bottom:2px solid var(--teal);padding-bottom:.1rem;
}
.coord-v-grand:hover{color:var(--teal-fonce);}

.pdf{
  margin-top:3.5rem;padding:1.9rem;background:var(--blanc);
  border:1px solid var(--filet);border-top:3px solid var(--encre);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  max-width:44rem;
}
.pdf-titre{font-size:1.2rem;font-variation-settings:'wdth' 106;}
.pdf-note{margin:.35rem 0 0;font-size:.95rem;color:var(--gris);}

/* --------------------------------------------------------------- pied */
.pied{border-top:1px solid var(--filet);background:var(--papier-creux);margin-top:0;}
.pied-in{
  max-width:var(--large);margin:0 auto;padding:2.6rem 1.5rem;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:baseline;
}
.pied-contact{display:flex;gap:1.6rem;flex-wrap:wrap;margin:0;}
.pied-contact a{
  font-family:var(--t-titre);font-size:.92rem;font-weight:500;
  font-variation-settings:'wdth' 102;
}
.pied-legal{margin:0;font-size:.86rem;color:var(--gris);}

/* ---------------------------------------------------------- responsive */
@media (max-width:60rem){
  .chiffres{grid-template-columns:repeat(2,1fr);gap:1.8rem;}
  .portes,.comps{grid-template-columns:repeat(2,1fr);}
  .cas{grid-template-columns:1fr;gap:1.4rem;}
  .frise-corps{padding-left:11.5rem;}
  .frise-legende{padding-left:11.5rem;}
  .piste-titre{width:10.5rem;}
}

@media (max-width:44rem){
  body{font-size:1.02rem;}
  .bloc,.bande{padding:3rem 0;}
  .hero{padding:2.6rem 0 2rem;}
  .entete-in{padding:.8rem 1.15rem;gap:.7rem;}
  .nav{gap:1rem;font-size:.86rem;}
  .nav-lang{padding-left:.8rem;}
  .bloc-in,.bande-in,.hero-in,.frise{padding-left:1.15rem;padding-right:1.15rem;}

  .chiffres{grid-template-columns:1fr;gap:1.4rem;}
  .chiffre-v{font-size:2.4rem;}
  .portes,.comps,.langues{grid-template-columns:1fr;gap:1.8rem;}
  .xp,.form{grid-template-columns:1fr;gap:.5rem;}
  .xp-dates{flex-direction:row;gap:.7rem;align-items:baseline;}
  .coord-l{grid-template-columns:1fr;gap:.2rem;}
  .eng-a{margin-left:0;}
  .pdf{padding:1.4rem;}

  /* la frise repasse en pleine largeur, titres au-dessus */
  .frise-corps{padding-left:0;}
  .frise-legende{padding-left:0;}
  .piste{margin-bottom:1.5rem;}
  .piste-titre{position:static;width:auto;margin-bottom:.4rem;}
  .piste-rail{height:1.9rem;}
  /* barre trop etroite pour porter son annee : on la lit dans le titre */
  .piste-annees{display:none;}
  .piste-annees-etroit{
    display:block;font-family:var(--t-titre);font-size:.78rem;font-weight:600;
    font-variation-settings:'wdth' 100;color:var(--teal-fonce);margin-top:.1rem;
  }
}

/* ------------------------------------------------------- préférences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .piste-barre{animation:none;transform:scaleX(1);}
  .piste-annees{animation:none;opacity:1;}
  *{transition-duration:.01ms!important;}
}

/* ------------------------------------------------------------ impression */
@media print{
  :root{--papier:#fff;--papier-creux:#fff;}
  .entete,.pied,.evite,.hero-actions,.pdf,.nav{display:none;}
  body{font-size:10.5pt;background:#fff;}
  .bloc,.bande{padding:1rem 0;border:none;}
  .xp,.cas,.form{break-inside:avoid;}
  a{color:var(--encre);text-decoration:none;}
  .piste-barre{transform:scaleX(1);animation:none;}
  .piste-annees{opacity:1;animation:none;}
}

/* ------------------------------------------------------- formations IA */
.comps-2{grid-template-columns:repeat(2,1fr);gap:2.4rem 3rem;}

.formas{display:flex;flex-direction:column;}
.forma{
  display:grid;grid-template-columns:1fr 1.75fr;gap:3rem;
  padding:2.4rem 0;border-top:1px solid var(--filet);
}
.forma:first-child{border-top:none;padding-top:0;}
.forma-client{
  font-family:var(--t-titre);font-weight:700;font-size:1.28rem;
  font-variation-settings:'wdth' 108;line-height:1.15;margin:0;
}
.forma-secteur{
  margin:.4rem 0 0;font-size:.95rem;color:var(--gris);line-height:1.4;
}
.forma-annee{
  margin:.75rem 0 0;font-family:var(--t-titre);font-size:.85rem;font-weight:600;
  font-variation-settings:'wdth' 102;color:var(--teal-fonce);
}
.forma-titre{font-size:1.34rem;font-variation-settings:'wdth' 106;margin-bottom:.75rem;}
.forma-corps p{color:var(--encre-clair);}
.forma-sortie{
  color:var(--encre)!important;
  border-left:3px solid var(--teal);padding-left:1rem;margin-top:1.2rem;
}
.forma-inter{
  margin-top:1.1rem;font-size:.93rem;color:var(--gris)!important;font-style:italic;
}

@media (max-width:60rem){
  .comps-2{grid-template-columns:1fr;gap:1.9rem;}
  .forma{grid-template-columns:1fr;gap:1.2rem;}
}

/* -------------------------------------------------------------- portrait */
.portrait{margin:0;}
.portrait img{
  display:block;width:15rem;height:15rem;
  border-radius:50%;object-fit:cover;
  background:var(--papier);
}
.presentation{
  display:grid;grid-template-columns:15rem minmax(0,var(--texte));
  gap:3rem;align-items:start;
}
.presentation-texte p:first-child{margin-top:-.35rem;}
.portrait-contact{margin-bottom:2.6rem;}
.portrait-contact img{width:11rem;height:11rem;}

@media (max-width:60rem){
  .presentation{grid-template-columns:1fr;gap:2rem;}
}
@media (max-width:44rem){
  .portrait img{width:9rem;height:9rem;}
  .portrait-contact img{width:8rem;height:8rem;}
}
@media print{
  .portrait img{width:7rem;height:7rem;}
}

.chapo-lien{margin-top:1.6rem;}