/* Polices auto-hébergées (aucune requête vers Google) — fichiers à déposer dans /fonts/ : voir fonts/LISEZMOI.txt */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700 800;font-display:swap;src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:only light;--bg:#f5f6f2;--paper:#fff;--ink:#101522;--muted:#5b6374;--dark:#0b1020;--line:#dfe2e7;--accent:#17c3b2;--accent2:#ffb84d;--radius:26px;--shadow:0 24px 70px rgba(12,18,32,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;line-height:1.65}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 10%,rgba(23,195,178,.08),transparent 28%),radial-gradient(circle at 10% 70%,rgba(255,184,77,.08),transparent 24%);z-index:-1}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,16,32,.86);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;padding:14px max(20px,calc((100vw - 1160px)/2));color:#fff}.brand{display:flex;align-items:center;gap:11px}.brand span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--dark);font-weight:800}.brand strong{font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:15px}.site-header nav{display:flex;gap:25px}.site-header nav a{position:relative;padding:6px 2px 10px;font-size:13px;color:#d8dce7;transition:color .25s}.site-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--accent),rgba(23,195,178,.35));transform-origin:left center;transform:scaleX(var(--nav-progress,0));opacity:0;box-shadow:0 0 12px rgba(23,195,178,.28);transition:transform .16s linear,opacity .2s}.site-header nav a.is-active{color:#fff}.site-header nav a.is-active:after{opacity:1}.site-header nav a:hover{color:var(--accent)}.menu-toggle{display:none;background:none;border:0;color:white;font-size:25px}.hero{min-height:800px;background:var(--dark);color:#fff;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,16,32,.96) 20%,rgba(11,16,32,.74) 58%,rgba(11,16,32,.35)),image-set(url('../img/bg1.webp') type('image/webp'), url('../img/bg1.webp') type('image/jpeg')) center/cover}.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:80px;min-height:800px;padding-top:90px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent);margin:0 0 18px}.hero h1,h2{font-family:Manrope,"DM Sans",system-ui,sans-serif;margin:0;line-height:1.02}.hero h1{font-size:clamp(58px,8vw,105px);letter-spacing:-.07em}.hero h1 em{font-style:normal;color:var(--accent)}.lead{font-size:20px;max-width:680px;color:#d8dce7;margin:28px 0}.current-role-hero{margin:22px 0 4px;padding:18px 22px;border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(23,195,178,.16),rgba(23,195,178,.03));border-radius:0 16px 16px 0;max-width:650px}.current-role-hero span{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:5px}.current-role-hero strong{display:block;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:clamp(22px,3vw,32px);line-height:1.15}.current-role-hero small{display:block;color:#b9c1d1;margin-top:5px;font-size:13px}.current-card{position:relative;border:1px solid rgba(23,195,178,.5);box-shadow:0 25px 80px rgba(23,195,178,.12),var(--shadow);transform:rotate(2deg)}.current-card .current-badge{position:absolute;z-index:2;top:24px;left:24px;background:var(--accent);color:var(--dark);font-size:10px;font-weight:900;letter-spacing:.12em;padding:7px 10px;border-radius:999px}.current-card strong{font-size:24px;color:#fff}.current-card a{display:inline-block;margin-top:10px;color:var(--accent);font-size:12px;font-weight:800}.job.current{background:rgba(23,195,178,.07);border:1px solid rgba(23,195,178,.35);border-radius:24px;padding:25px 25px 55px 35px;margin-left:-15px}.job.current:before{width:15px;height:15px;left:-9px;box-shadow:0 0 0 6px rgba(23,195,178,.12)}.job.current h3{font-size:30px;color:#fff}.job.current .job-main{padding-top:0}.job.current p{font-size:16px}.job.current .company{font-size:14px}.job.current .tag{font-size:10px;box-shadow:0 0 20px rgba(23,195,178,.18)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid transparent;padding:14px 20px;border-radius:999px;font-weight:700;font-size:14px;transition:.25s;cursor:pointer}.btn.primary{background:var(--accent);color:var(--dark)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(23,195,178,.25)}.btn.ghost{border-color:#556073;color:#fff}.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:32px;padding:14px;backdrop-filter:blur(10px);box-shadow:var(--shadow);transform:rotate(2deg)}.hero-card img{border-radius:22px;aspect-ratio:1/1;object-fit:cover;filter:saturate(.9)}.hero-card div{padding:18px 10px 10px}.hero-card span,.hero-card small{display:block;color:#9ea7ba;font-size:12px}.hero-card strong{display:block;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:20px;margin:4px 0}.section{padding:110px 0}.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.section h2{font-size:clamp(40px,5vw,65px);letter-spacing:-.05em}.section h2 span{color:var(--accent)}.big-text{font-size:24px;line-height:1.45;margin-top:0}.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:35px;border:1px solid var(--line)}.facts div{background:var(--paper);padding:22px}.facts b,.facts span{display:block}.facts b{font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:22px}.facts span{font-size:13px;color:var(--muted);margin-top:4px}.interests{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:70px}.interests article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.25s}.interests article:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.icon{font-size:25px;color:var(--accent)}h3{font-family:Manrope,"DM Sans",system-ui,sans-serif;margin:12px 0 6px;font-size:20px}p{color:var(--muted)}.dark{background:var(--dark);color:#fff}.dark p{color:#aeb5c5}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:70px}.section-head>p{font-size:17px}.timeline{border-left:1px solid #2f384d;margin-left:18px}.job{display:grid;grid-template-columns:150px 1fr;gap:40px;padding:0 0 55px 35px;position:relative}.job:before{content:"";position:absolute;width:11px;height:11px;border:3px solid var(--dark);background:#44506a;border-radius:50%;left:-7px;top:5px}.job.current:before{background:var(--accent)}.date{font-size:13.5px;color:#7f899d;text-transform:uppercase;letter-spacing:.1em}.job h3{font-size:24px;margin:0}.company{margin:4px 0 15px;color:var(--accent)!important;font-size:13px;display:flex;align-items:center;gap:9px;min-height:28px}.company-logo{width:28px;height:28px;object-fit:contain;flex:0 0 28px;border-radius:6px;background:rgba(255,255,255,.96);padding:3px;box-shadow:0 2px 10px rgba(0,0,0,.12)}.job.current .company-logo{width:32px;height:32px;flex-basis:32px;padding:3px}.stage-icon{margin-right:6px;font-size:.78em;color:var(--accent);vertical-align:middle}.job p{max-width:720px}.job a{color:var(--accent)}.tag{font-size:10px;letter-spacing:.14em;color:var(--dark);background:var(--accent);padding:5px 8px;border-radius:999px;font-weight:800;display:inline-block;margin-bottom:10px}.education-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.edu{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}.edu.featured{grid-column:span 2;background:var(--dark);color:#fff}.edu span{font-size:12px;color:var(--accent);font-weight:700}.edu h3{font-size:25px}.edu h4{margin:0;font-weight:600}.edu p{font-size:13px}.edu small{color:var(--muted)}.featured p,.featured small{color:#b5bdce}
/* Formations — vue compacte desktop : Master 2 et Master 1 sur une même ligne lorsque les autres formations sont masquées. */
@media(min-width:901px){
  .education-grid.is-collapsed .edu.featured{grid-column:span 1;}
}
.soft{background:#e9ece8}.contact{background:var(--dark);color:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.contact p{color:#aeb5c5}.contact-links{display:flex;flex-direction:column;gap:10px;margin:30px 0}.contact-links a{color:#fff}.contact-links a:hover{color:var(--accent)}
.job.current .date{padding-top:36px}
.stage-icon{display:inline-block;margin-right:9px;color:var(--accent);font-size:.72em;vertical-align:middle;transform:translateY(-1px)}
.contact-links{gap:12px}
.contact-links .social-link{display:flex;align-items:center;gap:13px;min-width:240px;padding:13px 16px;border:1px solid #3d475d;border-radius:14px;background:rgba(255,255,255,.025);color:#fff!important;text-decoration:none;transition:.25s}
.contact-links .social-link > i:first-child{width:22px;text-align:center;font-size:17px}
.contact-links .social-link > span{flex:1;font-weight:700;font-size:13px}
.contact-links .social-link > i:last-child{font-size:11px;color:#7f899d;transition:.25s}
.contact-links .social-link:hover{transform:translateX(5px);border-color:var(--accent);background:rgba(23,195,178,.08)}
.contact-links .social-link:hover > i:last-child{color:var(--accent);transform:translate(2px,-2px)}




.contact form{background:#fff;color:var(--ink);padding:32px;border-radius:28px}.contact label{display:block;font-size:12px;font-weight:700;margin-bottom:17px}.contact input,.contact textarea{display:block;width:100%;border:1px solid var(--line);background:#f8f9fa;border-radius:12px;padding:13px;margin-top:6px;font:inherit;outline:none}.contact input:focus,.contact textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,195,178,.12)}.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}.form-status{min-height:25px;font-size:13px;margin:12px 0 0}.form-status.success{color:#087d6e}.form-status.error{color:#b52626}footer{background:#070b16;color:#8992a5;padding:28px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px}.footer-inner strong{color:#fff}@media(max-width:900px){.site-header nav{display:none}.menu-toggle{display:block}.site-header.nav-open nav{position:absolute;display:flex;flex-direction:column;top:100%;left:0;right:0;padding:22px;background:#0b1020}.hero-grid,.two-col,.section-head,.contact-grid{grid-template-columns:1fr;gap:45px}.hero{min-height:auto}.hero-grid{min-height:auto;padding:140px 0 80px}.hero-card{max-width:480px}.interests{grid-template-columns:1fr 1fr}.education-grid{grid-template-columns:1fr}.edu.featured{grid-column:auto}.section{padding:80px 0}.job{grid-template-columns:95px 1fr;gap:20px}}
@media(max-width:600px){.wrap{width:min(100% - 28px,1160px)}.hero h1{font-size:58px}.lead{font-size:17px}.hero-actions,.hero-actions .btn{width:100%}.facts,.interests{grid-template-columns:1fr}.section h2{font-size:42px}.job{grid-template-columns:1fr;gap:5px;padding-left:25px}.date{margin-bottom:4px}.contact form{padding:22px}.footer-inner{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Ajustements visuels - mots-clés */
.hero-keywords{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;letter-spacing:.12em;font-weight:800;margin-bottom:22px}
.hero-keywords span{color:#f4f7fa;font-weight:800}
.hero-keywords b{color:var(--accent);font-weight:800}
@media(max-width:600px){.hero-keywords{font-size:12px;gap:6px;letter-spacing:.1em}}
/* Durée de poste : placée à la suite de l'entreprise, de la ville et du contrat */
.timeline .job .company{display:flex;align-items:center;flex-wrap:wrap;gap:7px 8px;}
.timeline .job .company .duration{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid rgba(23,195,178,.28);border-radius:999px;background:rgba(23,195,178,.08);color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.2;white-space:nowrap;margin-left:.6em;}
.timeline .job.current .company .duration{background:rgba(23,195,178,.13);border-color:rgba(23,195,178,.42);}
/* Logos d'expérience : placement sous la date, plus grand et centré */
.timeline .job{grid-template-columns:150px 1fr;}
.timeline .job > .date{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:2px;}

.timeline .job > .date .date-logo{display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:2px;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 5px 18px rgba(0,0,0,.18);}
.timeline .job > .date .date-logo .company-logo{width:100%;height:100%;object-fit:contain;flex:0 0 auto;border-radius:8px;background:transparent;padding:0;box-shadow:none;}
.timeline .job.current > .date .date-logo{width:70px;height:70px;border-color:rgba(23,195,178,.35);box-shadow:0 6px 22px rgba(23,195,178,.12);}
.timeline .job .company{gap:0;}
@media (max-width:760px){.timeline .job > .date .date-logo{width:52px;height:52px;padding:6px}.timeline .job.current > .date .date-logo{width:56px;height:56px}}
/* Correction des logos d'expériences : un seul logo, sous la date */
.timeline .job > .date .date-logo { display:flex !important; }
.timeline .job > .date .date-logo .company-logo { display:block !important; }
.timeline .job .job-main .company-logo,
.timeline .job .company > img,
.timeline .job .company img { display:none !important; }

/* Mobile uniquement - photo intégrée dans la barre supérieure (proposition A) */
.mobile-header-photo{display:none;}
@media(max-width:600px){
  .site-header{padding:10px 14px;min-height:60px;}
  .brand{gap:9px;min-width:0;}
  .brand-initials{display:none !important;}
  .mobile-header-photo{display:block;width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;object-position:center 28%;border:0;box-shadow:none;}
  .brand strong{font-size:14px;white-space:nowrap;letter-spacing:-.02em;}
  .menu-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;font-size:25px;line-height:1;}
  .hero-card{display:none;}
  .hero-grid{padding-top:100px;}
}

/* Mobile uniquement - nouvelle hiérarchie des cartes Expériences */
@media (max-width: 600px) {
  .timeline .job {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "period period"
      "title title"
      "logo company"
      "description description";
    column-gap: 12px;
    row-gap: 8px;
    padding: 0 0 34px 20px;
    align-items: center;
  }
  .timeline .job > .date,
  .timeline .job > .job-main,
  .timeline .job .job-top {
    display: contents;
  }
  .timeline .job .period {
    grid-area: period;
    display: block;
    text-align: left;
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: .07em;
  }
  .timeline .job h3 {
    grid-area: title;
    margin: 0 0 2px;
    font-size: 20px;
    line-height: 1.25;
  }
  .timeline .job > .date .date-logo {
    grid-area: logo;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 5px;
    justify-self: start;
  }
  .timeline .job.current > .date .date-logo {
    width: 52px;
    height: 52px;
  }
  .timeline .job .company {
    grid-area: company;
    align-self: center;
    margin: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .timeline .job .company .duration {
    margin-left: 0;
  }
  .timeline .job .job-main > p:not(.company) {
    grid-area: description;
    margin: 5px 0 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.6;
  }
  .timeline .job .tag {
    display: none;
  }
}

/* Mobile uniquement - nouvelle hiérarchie des formations */
.edu-school img{display:none;}
@media (max-width:600px){
  .education-grid{display:flex;flex-direction:column;gap:18px;}
  .education-grid .edu{display:flex;flex-direction:column;padding:24px 20px;border-radius:22px;}
  .education-grid .edu > span{display:none;}
  .education-grid .edu h3{order:1;margin:0 0 3px;font-size:21px;line-height:1.25;}
  .education-grid .edu h4{order:2;margin:0 0 13px;font-size:13px;line-height:1.45;color:var(--muted);font-weight:600;}
  .education-grid .edu-school{order:3;display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;margin:0 0 13px;}
  .education-grid .edu-school img{display:block;width:58px;height:58px;object-fit:contain;border-radius:12px;background:#fff;padding:5px;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.08);}
  .education-grid .edu-school p{margin:0;font-size:12px;line-height:1.45;color:var(--accent);font-weight:600;}
  .education-grid .edu small{order:4;display:block;margin:0;font-size:13px;line-height:1.6;}
  .education-grid .edu.featured{grid-column:auto;}
  .education-grid .edu.featured h4{color:#b5bdce;}
  .education-grid .edu.featured .edu-school p{color:var(--accent);}
  .education-grid .edu.featured .edu-school img{border-color:rgba(23,195,178,.28);}
}



/* Mobile uniquement - savoir-être, inspiré de l'ancien site et adapté au design actuel */
.mobile-soft-skills{display:none;}
@media(max-width:600px){
  .mobile-soft-skills{display:block;padding:8px 0 18px;background:var(--bg);}
  .mobile-soft-head{margin-bottom:16px;}
  .mobile-soft-head .eyebrow{margin:0 0 7px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;}
  .mobile-soft-head h2{margin:0;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:25px;line-height:1.16;letter-spacing:-.025em;color:var(--dark);}
  .mobile-soft-head h2 span{color:var(--accent);}
  .mobile-soft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .mobile-soft-grid article{display:flex;align-items:center;gap:11px;min-height:78px;padding:12px 11px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(11,16,32,.045);}
  .mobile-soft-grid article.soft-last{grid-column:1 / -1;justify-self:center;width:calc(50% - 5px);}
  .mobile-soft-grid .soft-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:rgba(23,195,178,.12);color:var(--accent);font-size:18px;}
  .mobile-soft-grid h3{margin:0 0 3px;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.2;color:var(--dark);}
  .mobile-soft-grid p{margin:0;font-size:10.5px;line-height:1.35;color:var(--muted);}
}





/* Savoir-être et Centres d'intérêt - présentation cohérente sur Web et Mobile */
.mobile-soft-skills{
  display:block;
  padding:0 0 20px;
  background:var(--bg);
}
.mobile-soft-head{margin-bottom:28px;}
.mobile-soft-head .eyebrow{margin:0 0 8px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;}
.mobile-soft-head h2{margin:0;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.035em;color:var(--dark);}
.mobile-soft-head h2 span{color:var(--accent);}
.mobile-soft-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.mobile-soft-grid article{display:flex;align-items:center;gap:12px;min-height:86px;padding:14px 15px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 8px 22px rgba(11,16,32,.045);transition:.25s;}
.mobile-soft-grid article:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.mobile-soft-grid article.soft-last{grid-column:auto;justify-self:stretch;width:auto;}
.mobile-soft-grid .soft-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:rgba(23,195,178,.12);color:var(--accent);font-size:18px;}
.mobile-soft-grid h3{margin:0 0 3px;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.2;color:var(--dark);}
.mobile-soft-grid p{margin:0;font-size:11px;line-height:1.4;color:var(--muted);}

.mobile-interests-b{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:58px;
}
.mobile-interests-b article{display:block;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(11,16,32,.045);transition:.25s;}
.mobile-interests-b article:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.mobile-interests-b .interest-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:50%;background:rgba(23,195,178,.12);color:var(--accent);font-size:18px;}
.mobile-interests-b article h3{margin:0 0 5px;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:18px;line-height:1.2;color:var(--dark);}
.mobile-interests-b article p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);}
.mobile-interests-b .diorama-interest{padding:20px;}
.mobile-interests-b .diorama-interest-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;align-items:center;}
.mobile-interests-b .diorama-interest-head .interest-icon{display:grid;margin:0;}
.mobile-interests-b .diorama-interest-head h3{margin:0;}
.mobile-interests-b .diorama-interest-head .diorama-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid rgba(23,195,178,.28);border-radius:999px;background:rgba(23,195,178,.07);color:var(--accent);font-size:11px;font-weight:800;cursor:pointer;}
.mobile-interests-b .diorama-description{margin:9px 0 12px!important;font-size:11px!important;line-height:1.4;}



/* Galerie dioramas : variante 2 — image immersive, légende en dégradé et défilement automatique */
.diorama-gallery{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.diorama-gallery[hidden]{display:none!important;}
.diorama-gallery-stage{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;}
.diorama-gallery-media{position:relative;grid-column:2;overflow:hidden;border-radius:16px;background:#0b1020;box-shadow:0 10px 28px rgba(11,16,32,.14);isolation:isolate;}
.diorama-gallery-slide{display:block;width:100%;height:250px;object-fit:cover;background:#eef1f1;transition:opacity .22s ease,transform .45s ease;}
.diorama-gallery-slide.is-changing{opacity:.58;transform:scale(1.012);}
.diorama-gallery-media:after{content:"";position:absolute;inset:35% 0 0;z-index:1;background:linear-gradient(to bottom,rgba(5,9,18,0),rgba(5,9,18,.88) 82%,rgba(5,9,18,.94));pointer-events:none;}
.gallery-arrow{width:34px;height:42px;border:1px solid rgba(11,16,32,.10);border-radius:11px;background:#fff;color:var(--dark);font-size:28px;line-height:1;box-shadow:0 4px 12px rgba(11,16,32,.08);cursor:pointer;z-index:3;transition:transform .18s ease,background .18s ease,border-color .18s ease;}
.gallery-arrow:hover{transform:translateY(-1px);border-color:rgba(23,195,178,.35);background:#f8ffff;}
.gallery-prev{grid-column:1;grid-row:1}.gallery-next{grid-column:3;grid-row:1}
.diorama-gallery-caption{position:absolute;left:18px;right:18px;bottom:15px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;color:#fff;pointer-events:none;}
.gallery-index{margin-bottom:5px;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.12em;}
.gallery-title{font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:18px;line-height:1.15;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.25);}
.gallery-subtitle{margin-top:3px;color:rgba(255,255,255,.78);font-size:11px;line-height:1.3;font-weight:600;}
.gallery-counter{position:absolute;right:48px;bottom:10px;z-index:3;padding:4px 8px;border-radius:999px;background:rgba(11,16,32,.72);color:#fff;font-size:9px;font-weight:800;letter-spacing:.04em;backdrop-filter:blur(5px);}
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:11px;min-height:24px;}
@media(max-width:600px){
  .diorama-gallery{margin-top:14px;padding-top:12px;}
  .diorama-gallery-stage{grid-template-columns:30px minmax(0,1fr) 30px;gap:4px;}
  .diorama-gallery-slide{height:190px;}
  .diorama-gallery-media{border-radius:14px;}
  .gallery-arrow{width:28px;height:36px;font-size:24px;border-radius:10px;}
  .diorama-gallery-caption{left:13px;right:13px;bottom:11px;}
  .gallery-index{font-size:8px;margin-bottom:3px;}
  .gallery-title{font-size:15px;}
  .gallery-subtitle{font-size:10px;margin-top:2px;}
  .gallery-counter{right:38px;bottom:8px;font-size:8px;padding:3px 6px;}
  .gallery-controls{gap:10px;margin-top:9px;}
}

/* Centres d'intérêt - Web : titres alignés à droite des icônes, comme les cartes Savoir-être */
@media(min-width:601px){
  .mobile-interests-b article:not(.diorama-interest){
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:12px;
    align-items:center;
  }
  .mobile-interests-b article:not(.diorama-interest) .interest-icon{
    display:grid;
    grid-row:1 / span 2;
    margin:0;
  }
  .mobile-interests-b article:not(.diorama-interest) h3{
    margin:0 0 3px;
  }
  .mobile-interests-b article:not(.diorama-interest) p{
    margin:0;
  }
}


/* Option 3 - À propos : timeline alternée, cohérente avec le design actuel */
@media(min-width:901px){
  .about-option3{position:relative;padding:8px 0 18px;}
  .about-option3:before{content:"";position:absolute;left:50%;top:92px;bottom:42px;width:1px;background:linear-gradient(to bottom,transparent,rgba(23,195,178,.48) 8%,rgba(23,195,178,.25) 88%,transparent);pointer-events:none;}
  .about-option3 .intro{padding:92px 0 55px;}
  .about-option3 .intro .two-col{position:relative;z-index:1;}
  .about-option3 .intro .two-col>div:first-child{padding-right:55px;}
  .about-option3 .intro .two-col>div:last-child{padding-left:55px;}
  .about-option3 .facts{margin-top:30px;border-radius:20px;overflow:hidden;box-shadow:0 8px 25px rgba(11,16,32,.045);}
  .about-option3 .facts div{padding:18px 20px;}
  .about-option3 .mobile-soft-skills{display:block;padding:34px 0 48px;background:transparent;}
  .about-option3 .mobile-soft-head{display:grid;grid-template-columns:44% 56%;align-items:end;margin-bottom:22px;position:relative;}
  .about-option3 .mobile-soft-head:before{content:"";position:absolute;left:calc(50% - 18px);top:7px;width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid rgba(23,195,178,.35);box-shadow:0 0 0 7px var(--bg);}
  .about-option3 .mobile-soft-head:after{content:"";position:absolute;left:calc(50% - 9px);top:16px;width:18px;height:18px;border-radius:50%;background:var(--accent);}
  .about-option3 .mobile-soft-head>div:first-child{padding-right:55px;}
  .about-option3 .mobile-soft-head h2{font-size:40px;line-height:1.04;}
  .about-option3 .mobile-soft-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-left:50%;padding-left:30px;position:relative;}
  .about-option3 .mobile-soft-grid article{min-height:74px;padding:13px 15px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 7px 20px rgba(11,16,32,.045);}
  .about-option3 .mobile-soft-grid article.soft-last{grid-column:1 / -1;justify-self:start;width:calc(50% - 9px);}
  .about-option3 .mobile-soft-grid .soft-icon{width:40px;height:40px;flex-basis:40px;font-size:17px;}
  .about-option3 .mobile-soft-grid h3{font-size:14px;}
  .about-option3 .mobile-soft-grid p{font-size:10.5px;}
  .about-option3 .interests{position:relative;margin-top:10px;padding:42px 0 60px;grid-template-columns:1fr 1fr;gap:14px 18px;}
  .about-option3 .interests:before{content:"";position:absolute;left:50%;top:0;width:1px;height:32px;background:rgba(23,195,178,.35);}
  .about-option3 .interests:after{content:"";position:absolute;left:calc(50% - 18px);top:-1px;width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid rgba(23,195,178,.35);box-shadow:0 0 0 7px var(--bg);}
  .about-option3 .interests article{padding:18px 20px;border-radius:20px;min-height:82px;}
  .about-option3 .interests article:not(.diorama-interest){display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;}
  .about-option3 .interests article:not(.diorama-interest) .interest-icon{grid-row:1 / span 2;margin:0;}
  .about-option3 .interests article h3{font-size:16px;margin:0 0 2px;}
  .about-option3 .interests article p{font-size:11px;}
  .about-option3 .diorama-interest{grid-column:1 / -1;}
  .about-option3 .diorama-interest-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;align-items:center;}
  .about-option3 .diorama-interest-head .interest-icon{margin:0;}
  .about-option3 .diorama-interest-head h3{margin:0;}
  .about-option3 .diorama-description{margin:7px 0 0 56px!important;font-size:11px!important;}
}
@media(max-width:900px){
  .about-option3{display:block;}
}


/* Contact - option 1 : présentation orientée recrutement */
.contact-recruit{align-items:stretch;gap:55px;}
.contact-intro{display:flex;flex-direction:column;justify-content:center;}
.contact-recruit-card{display:flex;align-items:center;gap:14px;margin:28px 0 22px;padding:16px 18px;border:1px solid rgba(23,195,178,.28);border-left:3px solid var(--accent);border-radius:18px;background:linear-gradient(90deg,rgba(23,195,178,.09),rgba(23,195,178,.02));}
.contact-recruit-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--accent);color:var(--dark);font-size:16px;}
.contact-recruit-card strong{display:block;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:13px;color:#fff;line-height:1.35;}
.contact-recruit-card span{display:block;margin-top:4px;color:#aeb5c5;font-size:11px;line-height:1.45;}
.contact-form-card{background:#fff;color:var(--ink);padding:30px;border-radius:28px;box-shadow:0 24px 70px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);}
.contact-form-head{display:flex;align-items:center;gap:12px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.contact-form-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(23,195,178,.12);color:var(--accent);font-size:16px;}
.contact-form-head strong{display:block;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:18px;line-height:1.2;}
.contact-form-head small{display:block;margin-top:3px;color:var(--muted);font-size:11px;}
.contact-form-card form{padding:0;background:transparent;border-radius:0;}
.contact-form-card .btn{width:100%;justify-content:center;}
@media(max-width:900px){.contact-recruit{gap:32px;}.contact-recruit-card{margin:22px 0 18px;}.contact-form-card{padding:24px;}}
@media(max-width:600px){.contact-recruit{gap:26px;}.contact-recruit-card{align-items:flex-start;padding:14px;}.contact-form-card{padding:20px;border-radius:22px;}.contact-form-head{margin-bottom:18px;padding-bottom:14px;}}

/* Contact - Option C : CV prioritaire */
.recruit-downloads{margin:28px 0 4px;}
.recruit-download-label{margin:0 0 10px!important;color:#7f899d!important;font-size:10px!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.cv-download-primary{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:1px solid rgba(23,195,178,.42);border-radius:18px;background:linear-gradient(105deg,var(--accent),#20b7aa);color:var(--dark)!important;text-decoration:none;box-shadow:0 14px 32px rgba(23,195,178,.18);transition:.25s;}
.cv-download-primary:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(23,195,178,.28);}
.cv-download-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:rgba(7,11,22,.12);font-size:18px;}
.cv-download-copy{display:flex;flex:1;flex-direction:column;gap:3px;}
.cv-download-copy strong{font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.2;}
.cv-download-copy small{font-size:10.5px;line-height:1.35;color:rgba(7,11,22,.72);}
.cv-download-arrow{font-size:15px;}
.vcard-download{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 4px;color:#d9deea!important;text-decoration:none;font-size:11px;}
.vcard-download>i:first-child{color:var(--accent);font-size:14px;width:20px;text-align:center;}
.vcard-download span{flex:1;}
.vcard-download>i:last-child{font-size:10px;color:#7f899d;transition:.2s;}
.vcard-download:hover{color:#fff!important;}
.vcard-download:hover>i:last-child{color:var(--accent);transform:translateX(3px);}
@media(max-width:600px){.recruit-downloads{margin-top:22px;}.cv-download-primary{padding:15px 14px;}.cv-download-copy strong{font-size:14px;}.cv-download-copy small{font-size:10px;}}

@media(max-width:900px){.site-header nav a{padding:0}.site-header nav a:after{display:none}}

/* Navigation icons - Font Awesome 6 */
.site-header nav a{display:flex;align-items:center;gap:9px;}
.site-header nav a .fa-solid{width:18px;text-align:center;flex:0 0 18px;color:var(--accent, #17c3b2);font-size:.95em;}


/* Nouvelle rubrique COMPÉTENCES - approche éditoriale */
.skills-modern-wrap{position:relative}
.skills-modern-head{margin-bottom:58px}
.skills-modern-head h2{max-width:760px}
.skills-modern-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.skill-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;min-height:380px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.skill-card:after{content:"";position:absolute;right:-35px;bottom:-50px;width:130px;height:130px;border-radius:50%;background:rgba(23,195,178,.06);pointer-events:none}
.skill-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(23,195,178,.35)}
.skill-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.skill-index{font-family:Manrope,"DM Sans",system-ui,sans-serif;font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.12em}
.skill-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(23,195,178,.09);color:var(--accent);font-size:18px}
.skill-card h3{font-size:25px;line-height:1.12;margin:0 0 8px}
.skill-lead{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--muted)}
.skill-card ul{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.skill-card li{position:relative;padding-left:14px;font-size:13px;line-height:1.45}
.skill-card li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.skill-card small{display:block;color:#87909f;font-size:9px;font-weight:800;letter-spacing:.13em;line-height:1.5}
.skill-languages{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.skill-languages span{border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:11px;color:var(--muted);line-height:1.35}
.skill-languages b{display:block;color:var(--ink);font-size:10px;letter-spacing:.1em;margin-bottom:2px}
.skills-value-card{margin-top:18px;border-radius:30px;background:var(--dark);color:#fff;padding:42px 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:55px;align-items:center;overflow:hidden;position:relative}
.skills-value-card:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-140px;top:-150px;border:1px solid rgba(23,195,178,.25);box-shadow:0 0 0 35px rgba(23,195,178,.035),0 0 0 70px rgba(23,195,178,.02)}
.skills-value-copy{position:relative;z-index:1}
.skills-value-copy .eyebrow{margin-bottom:12px}
.skills-value-copy h3{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.045em;margin:0 0 18px}
.skills-value-copy h3 span{color:var(--accent)}
.skills-value-copy p:not(.eyebrow){color:#adb5c7;font-size:15px;line-height:1.65;max-width:650px;margin:0}
.skills-value-copy strong{color:#fff}
.skills-value-points{display:grid;gap:10px;position:relative;z-index:1}
.skills-value-points div{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px 17px;background:rgba(255,255,255,.035)}
.skills-value-points span{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.15em;margin-bottom:4px}
.skills-value-points strong{font-size:12px;font-weight:600;color:#d9deea}
@media(max-width:900px){.skills-modern-grid{grid-template-columns:1fr 1fr}.skills-value-card{grid-template-columns:1fr;gap:30px;padding:35px}.skill-card{min-height:0}.skill-card ul{grid-template-columns:1fr}}
@media(max-width:600px){.skills-modern-head{margin-bottom:35px}.skills-modern-grid{grid-template-columns:1fr}.skill-card{padding:25px 22px}.skill-card h3{font-size:22px}.skill-languages{grid-template-columns:1fr 1fr}.skills-value-card{border-radius:24px;padding:30px 24px}.skills-value-copy h3{font-size:34px}.skills-value-points{gap:8px}}


/* ===== CENTRES D'INTÉRÊT — DESKTOP : GRILLE FIXE 2×2 =====
   Fermé : Informatique | Voyages
            Dioramas    | vide
   Ouvert : Informatique | Voyages
            Dioramas    | Slideshow
   Les 3 cartes d'origine ne changent jamais de case ni de dimension. */
@media (min-width:901px){
  .about-option3 .mobile-interests-b{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    grid-auto-flow:row !important;
    column-gap:18px !important;
    row-gap:18px !important;
    align-items:start !important;
    justify-items:stretch !important;
    margin-top:10px !important;
    padding:42px 0 60px !important;
    position:relative !important;
  }

  /* Annule les anciennes affectations éventuelles : on positionne explicitement. */
  .about-option3 .mobile-interests-b > .interest-informatique{
    grid-area:auto !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .about-option3 .mobile-interests-b > .interest-voyages{
    grid-area:auto !important;
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest{
    grid-area:auto !important;
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery{
    grid-area:auto !important;
    grid-column:2 !important;
    grid-row:2 !important;
  }

  .about-option3 .mobile-interests-b > .interest-informatique,
  .about-option3 .mobile-interests-b > .interest-voyages,
  .about-option3 .mobile-interests-b > .diorama-interest{
    position:relative !important;
    display:grid !important;
    width:100% !important;
    min-width:0 !important;
    min-height:82px !important;
    height:auto !important;
    margin:0 !important;
    padding:18px 20px !important;
    box-sizing:border-box !important;
    transform:none !important;
    overflow:visible !important;
    align-self:start !important;
    justify-self:stretch !important;
  }

  .about-option3 .mobile-interests-b > .interest-informatique,
  .about-option3 .mobile-interests-b > .interest-voyages{
    grid-template-columns:44px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    align-items:center !important;
  }
  .about-option3 .mobile-interests-b > .interest-informatique .interest-icon,
  .about-option3 .mobile-interests-b > .interest-voyages .interest-icon{
    display:grid !important;
    grid-row:1 / span 2 !important;
    margin:0 !important;
  }
  .about-option3 .mobile-interests-b > .interest-informatique h3,
  .about-option3 .mobile-interests-b > .interest-voyages h3{
    margin:0 0 3px !important;
    font-size:16px !important;
  }
  .about-option3 .mobile-interests-b > .interest-informatique p,
  .about-option3 .mobile-interests-b > .interest-voyages p{
    margin:0 !important;
    font-size:11px !important;
  }

  .about-option3 .mobile-interests-b > .diorama-interest{
    display:block !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-interest-head{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto !important;
    column-gap:12px !important;
    align-items:center !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-interest-head .interest-icon{
    display:grid !important;
    margin:0 !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest h3{
    margin:0 0 2px !important;
    font-size:16px !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-description{
    margin:7px 0 0 56px !important;
    font-size:11px !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-trigger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    height:30px !important;
    padding:0 10px !important;
    border:1px solid rgba(23,195,178,.28) !important;
    border-radius:999px !important;
    background:rgba(23,195,178,.07) !important;
    color:var(--accent) !important;
    font-size:11px !important;
    font-weight:800 !important;
    cursor:pointer !important;
  }

  /* Galerie : 4e carte indépendante, uniquement visible à l'ouverture. */
  .about-option3 .mobile-interests-b > .diorama-gallery{
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:14px !important;
    box-sizing:border-box !important;
    border:1px solid var(--line) !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(11,16,32,.045) !important;
    overflow:hidden !important;
    align-self:start !important;
    justify-self:stretch !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery[hidden]{
    display:none !important;
  }
  /* Centrage vertical du slideshow dans sa carte desktop, comme sur mobile. */
  .about-option3 .mobile-interests-b > .diorama-gallery .diorama-gallery-stage{
    transform:translateY(10px) !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery .gallery-controls{
    transform:translateY(10px) !important;
    margin-bottom:10px !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery .diorama-gallery-stage{
    position:relative !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    align-items:center !important;
    gap:5px !important;
    width:100% !important;
    height:auto !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery .diorama-gallery-media{
    position:relative !important;
    grid-column:2 !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery .diorama-gallery-slide{
    display:block !important;
    width:100% !important;
    height:250px !important;
    max-width:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery .gallery-prev{grid-column:1 !important;grid-row:1 !important;}
  .about-option3 .mobile-interests-b > .diorama-gallery .gallery-next{grid-column:3 !important;grid-row:1 !important;}
  .about-option3 .mobile-interests-b > .diorama-gallery .gallery-controls{margin-top:8px !important;}

  /* Centrage vertical du diorama dans sa carte mobile.
     Le visuel est légèrement descendu afin de compenser l'espace occupé par les commandes. */
  .about-option3 .mobile-interests-b > .diorama-gallery .diorama-gallery-stage{
    transform:translateY(10px) !important;
  }
  .about-option3 .mobile-interests-b > .diorama-gallery .gallery-controls{
    transform:translateY(10px) !important;
    margin-bottom:10px !important;
  }
}

/* ===== Coordonnées protégées contre le scraping HTML classique ===== */
.protected-contact{margin:26px 0 4px;padding:16px 0 2px;border-top:1px solid #2f384d}
.protected-contact-label{margin:0 0 10px;color:#7f899d!important;font-size:10px!important;font-weight:800;letter-spacing:.16em}
.protected-contact-button{display:flex;align-items:center;gap:13px;width:100%;min-width:240px;padding:13px 16px;border:1px solid #3d475d;border-radius:14px;background:rgba(255,255,255,.025);color:#fff!important;text-decoration:none;font:inherit;cursor:pointer;transition:.25s}
.protected-contact-button:hover{transform:translateX(5px);border-color:var(--accent);background:rgba(23,195,178,.08)}
.protected-contact-button>i:first-child{width:22px;text-align:center;font-size:16px;color:var(--accent)}
.protected-contact-button span{flex:1;font-weight:700;font-size:13px;text-align:left}
.protected-contact-button>i:last-child{font-size:11px;color:#7f899d}
.protected-contact-button.is-revealed span{font-size:13px;font-weight:800;letter-spacing:.02em}
.protected-contact-button.is-revealed>i:last-child{font-size:12px;color:var(--accent)}
.vcard-download{border:0;background:transparent;width:100%;font:inherit;cursor:pointer;text-align:left}
.vcard-download:hover{background:rgba(23,195,178,.04)}
@media(max-width:600px){
.protected-contact-button{min-width:0;touch-action:manipulation;-webkit-tap-highlight-color:rgba(23,195,178,.18)}
.protected-contact-button span{pointer-events:none}
}

/* ===== V53 — MENU MOBILE TOUJOURS VISIBLE À DROITE =====
   Le bouton est retiré du flux afin que le nom et la photo ne puissent pas le repousser
   hors écran sur les téléphones étroits. La zone de marque garde une largeur flexible. */
@media (max-width: 600px) {
  .site-header {
    padding: 10px 60px 10px 14px !important;
    min-height: 60px;
    justify-content: flex-start;
  }
  .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .site-header .brand strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header .menu-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: grid !important;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 25px;
    line-height: 1;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 103;
  }
  .site-header .menu-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .site-header.nav-open nav {
    z-index: 102;
  }
}

@media (max-width: 360px) {
  .site-header .mobile-header-photo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .site-header .brand {
    gap: 7px;
  }
  .site-header .brand strong {
    font-size: 13px;
  }
}

/* ===== V55 — ESPACEMENT MOBILE DES CARTES =====
   Ces règles ne s'appliquent qu'aux petits écrans ; la grille desktop reste inchangée. */
@media (max-width: 600px) {
  /* Ordre mobile demandé : Informatique → Voyages → Création de dioramas → Slideshow.
     Le diorama reste ainsi immédiatement au-dessus du slideshow lorsqu'il est ouvert. */
  .about-option3 .mobile-interests-b > .interest-informatique { order: 1 !important; }
  .about-option3 .mobile-interests-b > .interest-voyages { order: 2 !important; }
  .about-option3 .mobile-interests-b > .diorama-interest { order: 3 !important; }
  .about-option3 .mobile-interests-b > .diorama-gallery { order: 4 !important; }

  /* Centres d'intérêt : cartes sur toute la largeur, titres et descriptions à côté de l'icône. */
  .about-option3 .mobile-interests-b {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    width: min(100% - 28px, 1160px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .about-option3 .mobile-interests-b > article {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 11px !important;
    row-gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    transform: none;
  }
  .about-option3 .mobile-interests-b > article:not(.diorama-interest) .interest-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    font-size: 16px !important;
  }
  .about-option3 .mobile-interests-b > article h3 {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }
  .about-option3 .mobile-interests-b > article p {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }
  .about-option3 .mobile-interests-b > .diorama-interest {
    display: block !important;
    padding: 14px !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-interest-head {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-interest-head .interest-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    font-size: 16px !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-interest-head h3 {
    min-width: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-trigger {
    max-width: 62px !important;
    height: 28px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .about-option3 .mobile-interests-b > .diorama-interest .diorama-description {
    margin: 8px 0 0 44px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }

  /* Savoir-être : deux colonnes souples, sans largeur minimale imposée aux textes. */
  .about-option3 .mobile-soft-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .about-option3 .mobile-soft-grid > article {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 9px !important;
    box-sizing: border-box !important;
    border-radius: 15px !important;
    overflow-wrap: anywhere;
  }
  .about-option3 .mobile-soft-grid .soft-icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  .about-option3 .mobile-soft-grid > article > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .about-option3 .mobile-soft-grid h3 {
    margin: 0 0 3px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  .about-option3 .mobile-soft-grid p {
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  .about-option3 .mobile-soft-grid > article.soft-last {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 4.5px) !important;
  }
}

/* Sur les téléphones très étroits, éviter les colonnes internes trop serrées. */
@media (max-width: 320px) {
  .about-option3 .mobile-soft-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .about-option3 .mobile-soft-grid > article.soft-last {
    grid-column: auto !important;
    width: 100% !important;
  }
}


/* ===== V58 — MENU MOBILE : FLOU COLORÉ SUBTIL + BOUTON CV PDF =====
/* Fond diffus teinté turquoise/bleu derrière le menu ouvert (choix D). */
@media (max-width: 900px) {
  body.mobile-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(23, 195, 178, .18), rgba(83, 143, 185, .16));
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    backdrop-filter: blur(10px) saturate(1.08);
  }

  .site-header.nav-open nav {
    top: calc(100% + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 3px !important;
    padding: 13px !important;
    color: var(--ink) !important;
    background: rgba(255, 255, 255, .95) !important;
    border: 1px solid rgba(23, 195, 178, .24);
    border-radius: 22px;
    box-shadow: 0 22px 58px rgba(11, 16, 32, .22), 0 3px 14px rgba(23, 195, 178, .08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .site-header.nav-open nav > a:not(.mobile-cv-link) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 41px;
    padding: 10px 12px !important;
    border-radius: 12px;
    color: #26364b !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.35;
    background: transparent;
  }

  .site-header.nav-open nav > a:not(.mobile-cv-link) > i:first-child {
    width: 19px;
    flex: 0 0 19px;
    color: #587789;
    text-align: center;
    font-size: 15px;
  }

  .site-header.nav-open nav > a:not(.mobile-cv-link):hover,
  .site-header.nav-open nav > a:not(.mobile-cv-link):focus-visible {
    color: #075f5b !important;
    background: rgba(23, 195, 178, .10);
    outline: none;
  }

  .site-header.nav-open nav > a:not(.mobile-cv-link)::after {
    display: none !important;
  }

  /* Le bouton PDF est visible uniquement dans la navigation mobile (choix A). */
  .site-header nav > a.mobile-cv-link {
    display: none;
  }

  .site-header.nav-open nav > a.mobile-cv-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 14px !important;
    border: 1px solid rgba(23, 195, 178, .28);
    border-radius: 14px;
    background: rgba(23, 195, 178, .13);
    color: #075b57 !important;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  }

  .site-header.nav-open nav > a.mobile-cv-link > i {
    display: inline-grid;
    place-items: center;
    width: 20px;
    flex: 0 0 20px;
    color: #008c82;
    font-size: 18px;
  }

  .site-header.nav-open nav > a.mobile-cv-link > span {
    flex: 1 1 auto;
  }

  .site-header.nav-open nav > a.mobile-cv-link:hover,
  .site-header.nav-open nav > a.mobile-cv-link:focus-visible {
    background: rgba(23, 195, 178, .20);
    border-color: rgba(23, 195, 178, .48);
    outline: 2px solid rgba(23, 195, 178, .28);
    outline-offset: 2px;
  }
}

/* Le lien PDF n'apparaît pas dans la navigation desktop. */
.site-header nav > a.mobile-cv-link { display: none; }


/* ===== V59 — BOUTON CV PDF INTÉGRÉ À LA NAVIGATION DESKTOP =====
/* Style 1 choisi : bouton discret, icône PDF, teinte turquoise claire et flèche. */
@media (min-width: 901px) {
  .site-header nav {
    align-items: center;
    gap: clamp(12px, 1.55vw, 20px);
  }

  .site-header nav > a.desktop-cv-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 42px;
    margin-left: 2px;
    padding: 10px 13px;
    border: 1px solid rgba(23, 195, 178, .24);
    border-radius: 999px;
    background: rgba(23, 195, 178, .13);
    color: #c9fbf5 !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
  }

  .site-header nav > a.desktop-cv-link::after {
    display: none !important;
  }

  .site-header nav > a.desktop-cv-link > .fa-file-pdf {
    display: inline-grid;
    place-items: center;
    width: 18px;
    flex: 0 0 18px;
    color: #53e2d5;
    font-size: 16px;
    text-align: center;
  }

  .site-header nav > a.desktop-cv-link > span:not(.desktop-cv-divider) {
    white-space: nowrap;
  }



  .site-header nav > a.desktop-cv-link:hover,
  .site-header nav > a.desktop-cv-link:focus-visible {
    color: #e8fffc !important;
    border-color: rgba(23, 195, 178, .55);
    background: rgba(23, 195, 178, .22);
    box-shadow: 0 8px 24px rgba(23, 195, 178, .10), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-1px);
    outline: none;
  }

  .site-header nav > a.desktop-cv-link:focus-visible {
    outline: 2px solid rgba(23, 195, 178, .65);
    outline-offset: 3px;
  }
}

/* Tablettes larges / petits portables : garder la ligne compacte sans masquer le CV. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header .brand {
    gap: 7px;
  }

  .site-header .brand strong {
    font-size: 13px;
  }

  .site-header .brand .brand-initials {
    width: 34px;
    height: 34px;
  }

  .site-header nav {
    gap: 10px;
  }

  .site-header nav > a:not(.desktop-cv-link) {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 11px;
  }

  .site-header nav > a:not(.desktop-cv-link) > i {
    display: none;
  }

  .site-header nav > a.desktop-cv-link {
    gap: 6px;
    margin-left: 0;
    padding: 9px 9px;
    font-size: 10.5px;
  }

}

/* L'action desktop reste absente du panneau mobile : le bouton v58 est conservé. */
@media (max-width: 900px) {
  .site-header nav > a.desktop-cv-link {
    display: none !important;
  }
}


/* ===== V63 — SEO / navigation / contenus éditoriaux ===== */
.footer-links{display:inline-flex;gap:18px;flex-wrap:wrap}.footer-links a{color:#b9c1d1}.footer-links a:hover{color:var(--accent)}
.breadcrumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:28px}.breadcrumbs a{color:var(--accent);font-weight:700}.portfolio-crosslinks{font-size:14px;margin-top:18px}.portfolio-crosslinks a{color:var(--accent);font-weight:700}.portfolio-category-links{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 20px}.portfolio-category-links .btn{font-size:13px}.portfolio-category-links .btn.ghost{color:var(--ink);border-color:var(--line)}.portfolio-category-links .btn.ghost:hover{color:var(--accent)}


/* Améliorations accessibilité et confort (2026-10-11) */
:focus-visible{outline:3px solid var(--accent,#17c3b2);outline-offset:3px;border-radius:4px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{scroll-margin-top:100px}
img{height:auto}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(max-width:600px){
  .wrap{width:min(100% - 28px,1160px)}
  .contact form{padding:22px}
  .contact-grid{gap:32px}
}


/* Historique repliable — expériences > 10 ans et formations antérieures au Master 1 */
.history-toggle-wrap{display:flex;justify-content:center;margin:6px 0 8px;padding-left:35px;}
.history-toggle{width:min(100%,720px);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px;border:1px solid rgba(23,195,178,.28);border-radius:16px;background:linear-gradient(90deg,rgba(23,195,178,.10),rgba(23,195,178,.035));color:inherit;cursor:pointer;text-align:left;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;}
.history-toggle:hover{transform:translateY(-2px);border-color:rgba(23,195,178,.55);box-shadow:0 10px 28px rgba(23,195,178,.10);background:linear-gradient(90deg,rgba(23,195,178,.15),rgba(23,195,178,.05));}
.history-toggle:focus-visible{outline:3px solid rgba(23,195,178,.28);outline-offset:3px;}
.history-toggle-main{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.history-toggle-main>i{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(23,195,178,.14);color:var(--accent);font-size:13px;}
/* Centrage géométrique des icônes SVG dans les boutons d’historique.
   Aucun décalage vertical artificiel : le conteneur flex assure le centrage. */
.history-toggle-main>i{display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.history-toggle-main>i .ic{display:block;width:14px;height:14px;flex:0 0 14px;margin:0;position:static;transform:none;}
.history-toggle-label{font-size:12px;font-weight:800;letter-spacing:.01em;}
.history-toggle-chevron{color:var(--accent);font-size:12px;transition:transform .22s ease;}
.history-toggle[aria-expanded="true"] .history-toggle-chevron{transform:rotate(180deg);}
.timeline .job.is-history-hidden,.education-grid .edu.is-history-hidden{display:none!important;}
.education-history-toggle-wrap{padding-left:0;margin-top:20px;}
#formations .history-toggle{color:var(--ink);background:linear-gradient(90deg,rgba(23,195,178,.10),rgba(23,195,178,.025));}
#formations .history-toggle:hover{background:linear-gradient(90deg,rgba(23,195,178,.15),rgba(23,195,178,.05));}
@media(max-width:600px){
  .history-toggle-wrap{padding-left:20px;margin-top:-4px;}
  .education-history-toggle-wrap{padding-left:0;margin-top:18px;}
  .history-toggle{padding:12px 13px;border-radius:15px;gap:12px;}
  .history-toggle-label{font-size:11px;line-height:1.35;}
  .history-toggle-main{gap:8px;}
  .history-toggle-main>i{width:28px;height:28px;flex-basis:28px;font-size:12px;}
}

/* ===== TIMELINE — règles finales consolidées ===== */
@media (min-width:901px){
  .timeline .job.current{
    margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important;
    padding:0 0 55px 35px!important;display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;gap:40px!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
    border-radius:24px!important;box-sizing:border-box!important;overflow:visible!important;
  }
  .timeline .job.current>.date{padding:2px 0 0!important;border-right:0!important;min-width:0!important;justify-content:flex-start!important}
  .timeline .job.current>.date .period{color:#7f899d!important;line-height:1.45!important}
  .timeline .job.current>.date .date-logo{width:64px!important;height:64px!important;padding:2px!important;margin-top:10px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 5px 18px rgba(0,0,0,.18)!important}
  .timeline .job.current>.job-main{min-width:0!important;padding:0!important}
  .timeline .job.current h3{font-size:24px!important;line-height:1.2!important;margin:0!important}
  .timeline .job.current .company{margin:4px 0 15px!important;font-size:13px!important}
  .timeline .job.current p:not(.company){max-width:720px!important;margin-bottom:0!important;font-size:inherit!important;line-height:inherit!important}
  .timeline .job.current .tag{margin:0 0 10px!important;box-shadow:0 0 18px rgba(23,195,178,.18)!important}
  .timeline .job.current:before{left:-7px!important;top:5px!important;width:11px!important;height:11px!important;border:3px solid var(--dark)!important;background:var(--accent)!important;box-shadow:0 0 0 5px rgba(23,195,178,.10),0 0 18px rgba(23,195,178,.48)!important;z-index:4!important}
  .timeline .job:before{left:-8.5px!important}
  .timeline .job.current::after{content:"";position:absolute;z-index:0;left:1px!important;right:118px!important;top:-18px!important;bottom:18px!important;border:1px solid rgba(23,195,178,.62)!important;border-radius:24px!important;background:linear-gradient(90deg,rgba(23,195,178,.025),rgba(23,195,178,.012))!important;box-shadow:0 0 20px rgba(23,195,178,.08)!important;pointer-events:none}
  .timeline .job.current>*{position:relative;z-index:1}
  .timeline .job.current::before{z-index:4!important}
}
@media (max-width:600px){
  .timeline .job.current{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important}
  .timeline .job:before,.timeline .job.current:before{left:0!important;transform:translateX(-50%)!important}
  .timeline .job .job-main>p:not(.company){padding-right:14px!important;text-align:left!important;text-justify:auto!important}
  .timeline .job.current .period{position:relative!important;display:inline-block!important;width:max-content!important;max-width:100%!important}
  .timeline .job.current .period{transform:translateX(8px)!important}
  .timeline .job.current .period::after{content:"EN POSTE";display:inline-flex;align-items:center;justify-content:center;margin-left:10px;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--dark);font-size:9px;font-weight:900;letter-spacing:.11em;line-height:1;white-space:nowrap;vertical-align:middle;box-shadow:0 0 12px rgba(23,195,178,.22)}
  .timeline .job>.date span.date-logo,.timeline .job.current>.date span.date-logo{padding:2px!important}
}
.timeline .job>.date span.date-logo,.timeline .job.current>.date span.date-logo{padding:2px!important}
/* ===================================================================
   V113 — Audit : icônes SVG, accessibilité, formulaire, mentions légales
   =================================================================== */
:root{--accent-ink:#067a70}

/* Icônes : sprite SVG (remplace Font Awesome chargé depuis un CDN) */
i[class*="fa-solid"],i[class*="fa-regular"],i[class*="fa-brands"]{font-style:normal;display:inline-block;line-height:1;text-align:center;flex-shrink:0}
svg.ic{height:1em;width:auto;fill:currentColor;vertical-align:-.125em;display:inline-block;overflow:visible}
.fa-spin svg.ic{animation:ic-spin 1s linear infinite}
@keyframes ic-spin{to{transform:rotate(360deg)}}

/* Lien d'évitement */
.skip-link{position:fixed;left:12px;top:-64px;z-index:300;background:#fff;color:#0b1020;padding:10px 16px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:top .15s}
.skip-link:focus{top:12px;outline:3px solid #17c3b2;outline-offset:2px}
main:focus{outline:none}

/* Contraste : le turquoise #17c3b2 reste réservé aux fonds sombres ; sur fond clair on utilise une teinte plus profonde (≥ 4,5:1) */
.intro .eyebrow,#formations .eyebrow,#competences .skills-modern-head .eyebrow,.mobile-soft-head .eyebrow,
.portfolio-page .eyebrow,.portfolio-category .eyebrow,.documents-page .documents-intro .eyebrow{color:var(--accent-ink)}
.section:not(.dark):not(.contact) h2 span,.mobile-soft-head h2 span,.documents-intro h1 em{color:var(--accent-ink)}
.edu:not(.featured)>span,.education-grid .edu:not(.featured) .edu-school p,.skill-index,.breadcrumbs a{color:var(--accent-ink)}
.document-number{color:var(--accent-ink)}

/* Pied de page : lien mentions légales */
.footer-links{display:inline-flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{color:#b9c1d1;text-decoration:underline;text-underline-offset:3px}
.footer-links a:hover,.footer-links a:focus-visible{color:#fff}

/* Formulaire : information RGPD et erreurs par champ */
.contact-form-card .form-privacy{margin:0 0 14px;font-size:12px;line-height:1.5;color:#596477}
.contact-form-card .form-privacy a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.contact form .field-error{display:block;margin:6px 0 0;font-size:12px;font-weight:600;color:#b52626}
.contact form [aria-invalid="true"]{border-color:#b52626!important;box-shadow:0 0 0 2px rgba(181,38,38,.14)}

/* Diaporama : bouton pause */
.gallery-pause{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(11,16,32,.14);border-radius:50%;background:#fff;color:var(--dark);font-size:11px;cursor:pointer;box-shadow:0 3px 10px rgba(11,16,32,.08)}
.gallery-pause:hover{border-color:var(--accent)}
.gallery-pause:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Portfolio : WebP via <picture> sans changer la mise en page */
.gallery picture{display:contents}

/* Page mentions légales */
.legal-page{padding:150px 0 100px}
.legal-page .wrap{max-width:820px}
.legal-page h1{font:800 clamp(38px,6vw,64px)/1.05 Manrope,"DM Sans",system-ui,sans-serif;letter-spacing:-.05em;margin:0 0 10px}
.legal-page .legal-updated{font-size:13px;color:var(--muted);margin:0 0 30px}
.legal-page h2{font-size:26px;line-height:1.15;letter-spacing:-.03em;margin:46px 0 12px}
.legal-page h3{font-size:18px;margin:26px 0 6px}
.legal-page p,.legal-page li{color:#3e485b;line-height:1.7;font-size:16px}
.legal-page ul{padding-left:22px;margin:8px 0 16px}
.legal-page a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.legal-page .legal-todo{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px}

/* Mouvement réduit : aucune animation ni transition, défilement instantané */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.protected-contact-button+.protected-contact-button{margin-top:10px}

/* ===== Portfolio — styles externalisés ===== */
.portfolio-page{padding:150px 0 100px}.portfolio-nav{display:flex;gap:10px;flex-wrap:wrap;margin:35px 0}.filter{border:1px solid #dfe2e7;background:#fff;border-radius:999px;padding:9px 15px;cursor:pointer}.filter.active,.filter:hover{background:#0b1020;color:#fff}.project{margin:70px 0}.project-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:25px}.project-head h2{font-size:clamp(35px,4vw,56px)}.project-head p{max-width:620px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gallery figure{margin:0;background:#f7f8f8;border-radius:18px;overflow:hidden;border:1px solid #e2e5e8}.gallery img{width:auto;max-width:100%;height:185px;object-fit:contain;margin:0 auto;transition:.35s}.gallery figure:hover img{transform:scale(1.025)}.gallery figcaption{padding:11px 14px;font-size:12px;color:#697181;background:#fff}.site-back{display:inline-flex;margin-top:30px}.project.hidden{display:none}@media(max-width:800px){.project-head{grid-template-columns:1fr;gap:10px}.gallery{grid-template-columns:1fr 1fr}.gallery img{height:165px}}@media(max-width:550px){.gallery{grid-template-columns:1fr}.gallery img{height:175px}}

/* ===================================================================
   V114 — Contrastes (WCAG AA) et section « Réalisations » de l'accueil
   =================================================================== */
:root{--accent-ink:#05665d}
#apropos .diorama-interest-head button.diorama-trigger,body .about-option3 .diorama-interest .diorama-trigger,body .about-option3 .mobile-interests-b .diorama-trigger,body .diorama-trigger{color:var(--accent-ink)!important}
.showcase .eyebrow{color:var(--accent-ink)}
.skill-card small{color:#5b6374}
.portfolio-crosslinks a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.showcase{background:var(--bg)}
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.showcase-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);transition:transform .25s,box-shadow .25s}
.showcase-card:hover,.showcase-card:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow)}
.showcase-thumb{display:flex;align-items:center;justify-content:center;height:190px;padding:18px;background:linear-gradient(180deg,#eef1f0,#e4e8e8)}
.showcase-thumb img{max-height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:8px;box-shadow:0 8px 24px rgba(12,18,32,.14)}
.showcase-body{display:flex;flex-direction:column;gap:6px;padding:24px 26px 28px;flex:1}
.showcase-body small{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent-ink)}
.showcase-body strong{font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:22px;line-height:1.2}
.showcase-body>span{color:var(--muted);font-size:15px;line-height:1.55}
.showcase-body em{margin-top:auto;padding-top:12px;font-style:normal;font-weight:700;font-size:14px;color:var(--accent-ink)}
.showcase-all{margin:34px 0 0;text-align:center}
.showcase-all .btn.ghost{border-color:#9aa3b2;color:var(--ink)}
.showcase-all .btn.ghost:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
@media(max-width:860px){.showcase-grid{grid-template-columns:1fr}.showcase-thumb{height:170px}}
@media(prefers-reduced-motion:reduce){.showcase-card{transition:none}.showcase-card:hover{transform:none}}

/* V115 — Chiffres clés du poste actuel */
.job-kpis{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:720px}
.job-kpis li{padding:14px 14px 12px;border:1px solid rgba(23,195,178,.35);border-radius:16px;background:rgba(23,195,178,.08)}
.job-kpis strong{display:block;font-family:Manrope,"DM Sans",system-ui,sans-serif;font-size:30px;line-height:1;color:#fff}
.job-kpis span{display:block;margin-top:6px;font-size:12px;line-height:1.35;color:#c4cbda}
@media(max-width:720px){.job-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V116 — Icônes des boutons d'historique : centrage rétabli.
   La règle générique i[class*="fa-regular"]{display:inline-block} (V113) annulait le centrage flex
   de .history-toggle-main > i ; on rétablit un conteneur flex plus spécifique. */
.history-toggle .history-toggle-main>i{display:flex;align-items:center;justify-content:center;line-height:1}
.history-toggle .history-toggle-main>i>.ic,.history-toggle .history-toggle-chevron>.ic{display:block;margin:0;position:static;transform:none}
.history-toggle .history-toggle-chevron{display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* V117 — Chiffres clés du poste actuel : lisibles sur mobile.
   Sur mobile, .job-main est en display:contents et .job est une grille à 2 colonnes (logo + société) :
   la liste doit occuper toute la largeur, sous la description. */
@media (max-width:600px){
  .timeline .job.current .job-kpis{display:grid!important;grid-column:1 / -1 !important;width:calc(100% - 14px)!important;max-width:none!important;min-width:0!important;margin:14px 0 0!important;padding:0!important;gap:10px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .timeline .job.current .job-kpis li{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;padding:14px 14px 13px!important;border-radius:14px!important}
  .timeline .job.current .job-kpis strong{font-size:34px!important;letter-spacing:-.02em!important}
  .timeline .job.current .job-kpis span{display:block!important;width:auto!important;margin-top:7px!important;font-size:13px!important;line-height:1.35!important;overflow-wrap:break-word;hyphens:manual;color:#d3d9e6!important}
}
@media (max-width:360px){
  .timeline .job.current .job-kpis{gap:8px!important}
  .timeline .job.current .job-kpis li{padding:12px 11px 11px!important}
  .timeline .job.current .job-kpis strong{font-size:30px!important}
  .timeline .job.current .job-kpis span{font-size:12px!important}
}

/* V118 — Texte « À propos » : même taille et même interligne que le texte d'introduction du haut de page (.lead). */
.big-text{font-size:20px;line-height:1.65}
@media (max-width:600px){.big-text{font-size:17px}}

/* V119 — Carte « Création de dioramas » : même disposition que « Informatique » et « Voyages »
   (pastille à gauche, titre puis explication, mêmes espacements) ; le bouton « Photos » reste à droite.
   Hors tablette (601–900 px), où les cartes de gauche sont déjà empilées différemment.
   Sélecteurs volontairement spécifiques : des règles mobiles antérieures en !important ciblent cette carte. */
@media (min-width:901px),(max-width:600px){
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:12px!important;align-items:center!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .diorama-interest-head{display:contents!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .interest-icon{grid-column:1!important;grid-row:1 / span 2!important;margin:0!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest h3{grid-column:2!important;grid-row:1!important;margin:0 0 3px!important;font-size:16px!important;line-height:1.2!important;min-width:0!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .diorama-description{grid-column:2!important;grid-row:2!important;margin:0!important;font-size:var(--fs-small)!important;line-height:1.5!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .diorama-trigger{grid-column:3!important;grid-row:1 / span 2!important;align-self:center!important;justify-self:end!important;margin:0!important}
}
@media (max-width:600px){
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest{grid-template-columns:36px minmax(0,1fr) auto!important;column-gap:11px!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest h3{margin:0!important;font-size:15px!important;line-height:1.25!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .diorama-description{line-height:1.4!important}
}

/* V120 — Écart titre / explication de « Création de dioramas » identique à celui d'« Informatique » (référence inchangée).
   Dans la carte de référence, l'écart (≈ 5,7 px) vient de l'étirement des deux lignes de la grille (24,84 px + 19,16 px)
   autour de la pastille de 44 px. On reproduit ces mêmes lignes de façon explicite : l'écart reste identique que
   l'explication tienne sur une ligne ou sur deux (≈ 901–1090 px). */
@media (min-width:901px){
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest{grid-template-rows:21.1px auto!important;row-gap:0!important;align-content:start!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .interest-icon{align-self:center!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest h3{align-self:start!important;margin:.22px 0 0!important}
  html body .about-option3 .mobile-interests-b > .diorama-interest.diorama-interest .diorama-description{align-self:start!important;margin:1.72px 0 0!important}
}


/* V121 — Échelle typographique unique (harmonisation entre sections).
   Chapô 20/17 · Introduction de section 18/17 · Courant 16/15 · Secondaire 14/13 · Légende 12 · Étiquette 11 minimum.
   Titres : carte principale 24/20 · carte compacte 16/15 · chiffre clé 32.
   Les tailles se règlent ici, à un seul endroit. */
:root{
  --fs-lead:20px;--fs-intro:18px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-label:11px;
  --fs-h3:24px;--fs-h3-compact:16px;--fs-kpi:32px;
  --lh-body:1.6;--lh-small:1.5;--lh-title:1.2;
}
@media (max-width:600px){
  :root{--fs-lead:17px;--fs-intro:17px;--fs-body:15px;--fs-small:13px;--fs-h3:20px;--fs-h3-compact:15px}
}

/* Introductions de section */
html body main#main section .section-head>p:not(.eyebrow){font-size:var(--fs-intro)!important;line-height:1.65!important}

/* Texte courant */
html body main#main .timeline .job-main>p,
html body main#main .timeline .job-main>p strong,
html body main#main .timeline .job-main>p a,
html body main#main .skills-value-copy>p,
html body main#main .skills-value-copy>p strong,
html body main#main .contact-intro>p,
html body main#main .edu h4{font-size:var(--fs-body)!important;line-height:var(--lh-body)!important}

/* Texte secondaire */
html body main#main .timeline .job-main .company,
html body main#main .timeline .job-main .company span:not(.duration),
html body main#main .timeline .date .period,
html body main#main .edu .edu-school p,
html body main#main .edu>small,
html body main#main .skill-card .skill-lead,
html body main#main .skill-card li,
html body main#main .showcase-body>span,
html body main#main .interests article>p,
html body .about-option3 .mobile-soft-grid p,
html body .mobile-soft-grid p{font-size:var(--fs-small)!important;line-height:var(--lh-small)!important}
html body main#main .timeline .date .period{line-height:1.45!important}

/* Légendes et étiquettes (jamais en dessous de 11 px) */
html body main#main .skill-card>small,
html body main#main .skill-languages b,
html body main#main .skills-value-points span,
html body main#main .timeline .tag,
html body main#main .timeline .duration,
html body main#main .current-badge,
html body main#main .current-role-hero>span,
html body main#main .protected-contact-label,
html body main#main .recruit-download-label,
html body main#main .showcase-body>small,
html body main#main .diorama-trigger,
html body .about-option3 .mobile-soft-head .eyebrow,
html body .mobile-soft-head .eyebrow{font-size:var(--fs-label)!important}
html body main#main .skill-languages span,
html body main#main .cv-download-copy small,
html body main#main .contact-form-head small,
html body main#main .history-toggle-label{font-size:var(--fs-caption)!important}

/* Titres de cartes principales */
html body main#main .timeline .job-main h3,
html body main#main .edu h3,
html body main#main .skill-card h3,
html body main#main .showcase-body>strong{font-size:var(--fs-h3)!important;line-height:var(--lh-title)!important}

/* Titres de cartes compactes */
html body main#main .interests article h3,
html body .about-option3 .mobile-soft-grid h3,
html body .mobile-soft-grid h3,
html body main#main .cv-download-copy strong,
html body main#main .contact-form-head strong{font-size:var(--fs-h3-compact)!important;line-height:var(--lh-title)!important}

/* Chiffres clés du poste */
html body main#main .timeline .job.current .job-kpis strong{font-size:var(--fs-kpi)!important}

/* V121b — derniers écarts : légendes du haut de page et boutons de contact au niveau « Secondaire » */
html body main#main .current-role-hero small,
html body main#main .facts>div>span,
html body main#main .protected-contact-button>span,
html body main#main .social-link>span,
html body main#main .skill-card .skill-index{font-size:var(--fs-small)!important}

/* V121c — tablette (601–900 px) : cartes d'intérêts sur une colonne pour garder des titres lisibles avec l'échelle unique */
@media (min-width:601px) and (max-width:900px){
  .about-option3 .mobile-interests-b{grid-template-columns:minmax(0,1fr)!important}
}

/* V122 — Poste actuel (mobile/tablette ≤900 px) : cadre centré verticalement.
   Même espace intérieur en haut et en bas (22 px), et marge sous le cadre avant le poste précédent. */
@media (max-width:900px){
  .timeline .job.current{padding:22px 20px 22px 20px!important;margin-bottom:30px!important}
  .timeline .job.current .job-kpis{width:100%!important}
  .timeline .job.current:before{top:27px!important}
}

/* V123 — Sélecteur de langue du CV (FR · EN) */
.cv-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(23,195,178,.45);border-radius:999px;background:rgba(23,195,178,.08);font:800 12px/1 Manrope,"DM Sans",system-ui,sans-serif;letter-spacing:.08em;flex:0 0 auto;position:relative;z-index:2}
.cv-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding:0 10px;border-radius:999px;color:var(--accent-ink,#05665d);text-decoration:none;transition:background .2s,color .2s}
.cv-lang a:hover{background:rgba(23,195,178,.18)}
.cv-lang a[aria-current="true"]{background:var(--accent);color:var(--dark)}
.cv-lang a:focus-visible{outline:2px solid var(--accent-ink,#05665d);outline-offset:2px}
.cv-lang--dark{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.cv-lang--dark a{color:#d8dce7}
.cv-lang--dark a:hover{background:rgba(255,255,255,.12)}
.cv-lang--dark a[aria-current="true"]{background:var(--accent);color:var(--dark)}
.cv-lang--dark a:focus-visible{outline-color:#fff}
.hero-actions .cv-lang{align-self:center}
.recruit-download-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.recruit-download-head .recruit-download-label{margin:0!important}
.documents-page .document-card .document-topline .cv-lang{margin-left:auto}
@media(max-width:600px){.hero-actions .cv-lang{width:100%;justify-content:center}.hero-actions .cv-lang a{flex:1;height:34px}}

/* V124 — Formations (ordinateur) : logo de l'école en haut à droite, médaillon sur halo.
   Sur mobile (≤900 px) le logo reste à côté du nom de l'école (règles V-mobile inchangées). */
@media (min-width:901px){
  .education-grid .edu{position:relative;overflow:hidden}
  .education-grid .edu:before{content:"";position:absolute;right:-48px;top:-48px;width:168px;height:168px;border-radius:50%;background:rgba(23,195,178,.09);pointer-events:none}
  .education-grid .edu.featured:before{background:rgba(23,195,178,.14)}
  .education-grid .edu>*{position:relative}
  .education-grid .edu .edu-school{position:static}
  .education-grid .edu .edu-school img{display:block;position:absolute;top:24px;right:26px;width:58px;height:58px;object-fit:contain;padding:7px;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(11,16,32,.14)}
  .education-grid .edu h3{padding-right:84px}
}

/* V125 — Sous-titre explicatif du poste (haut de page) */
html body main#main .current-role-hero .role-sub{margin:6px 0 0;color:#8fe6dd;font-size:var(--fs-small);font-weight:600;line-height:1.4}

/* Mobile : pied de page centré */
@media (max-width:600px){.footer-inner{flex-direction:column;align-items:center;text-align:center;gap:10px}.footer-links{justify-content:center}}

/* Mobile : cadre des chiffres clés arrondi comme les cartes du dessous */
@media (max-width:900px){.facts{border-radius:22px;overflow:hidden;box-shadow:0 8px 22px rgba(11,16,32,.045)}}

/* Bascule CV FR/EN — version discrète (mini pastille) */
.cv-lang--dark{padding:2px;gap:0;border-color:rgba(255,255,255,.16);background:transparent;font-size:11px;letter-spacing:.06em}
.cv-lang--dark a{min-width:0;height:auto;padding:7px 14px;color:#8c96aa;font-weight:700}
.cv-lang--dark a:hover{background:rgba(255,255,255,.08);color:#fff}
.cv-lang--dark a[aria-current="true"]{background:rgba(255,255,255,.12);color:#fff}
@media(max-width:600px){.hero-actions .cv-lang{width:auto;margin:2px auto 0;align-self:center;justify-content:center}.hero-actions .cv-lang a{flex:0 0 auto;height:auto}}