/* v31 : si tu ne vois pas cette ligne sur GitHub, le fichier n'est pas à jour */
/* ==========================================================================
   ACCUEIL : héros, parcours en itinéraire, projets, nomenclature
   ========================================================================== */

/* ==========================================================================
   HÉROS : fond habillé d'une trame de plan et d'une axonométrie au trait
   ========================================================================== */
.heros{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,8vw,6.5rem) clamp(2.5rem,6vw,4.5rem);
  border-bottom:1.5px solid var(--trait);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(27,79,216,.09), transparent 62%),
    radial-gradient(70% 60% at 4% 96%, rgba(255,197,61,.13), transparent 65%),
    linear-gradient(180deg,#F7F8FA 0%, var(--papier) 72%);
}
.heros::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(25,27,31,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,27,31,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.15));
}
.heros-int{position:relative; z-index:2;}

/* Silhouette de grue a tour, en image de fond.
   Elle vit entierement dans ce fichier : si la feuille n'est pas chargee,
   rien ne s'affiche, plutot qu'une forme cassee. */
.heros::after{
  content:''; position:absolute; right:2%; bottom:9%;
  width:min(46%,560px); height:min(94%,600px);
  z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='664'%20viewBox='0%200%20560%20664'%3E%3Cg%20fill='none'%20stroke='%23191B1F'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='0.22'%3E%3Cpath%20d=%22M250%20600V150M288%20600V150%22/%3E%3Cpath%20d=%22M250%20150H288%22/%3E%3Cpath%20d=%22M250%20195H288%22/%3E%3Cpath%20d=%22M250%20240H288%22/%3E%3Cpath%20d=%22M250%20285H288%22/%3E%3Cpath%20d=%22M250%20330H288%22/%3E%3Cpath%20d=%22M250%20375H288%22/%3E%3Cpath%20d=%22M250%20420H288%22/%3E%3Cpath%20d=%22M250%20465H288%22/%3E%3Cpath%20d=%22M250%20510H288%22/%3E%3Cpath%20d=%22M250%20555H288%22/%3E%3Cpath%20d=%22M250%20600H288%22/%3E%3Cpath%20d=%22M250%20150L288%20195M288%20150L250%20195%22/%3E%3Cpath%20d=%22M250%20195L288%20240M288%20195L250%20240%22/%3E%3Cpath%20d=%22M250%20240L288%20285M288%20240L250%20285%22/%3E%3Cpath%20d=%22M250%20285L288%20330M288%20285L250%20330%22/%3E%3Cpath%20d=%22M250%20330L288%20375M288%20330L250%20375%22/%3E%3Cpath%20d=%22M250%20375L288%20420M288%20375L250%20420%22/%3E%3Cpath%20d=%22M250%20420L288%20465M288%20420L250%20465%22/%3E%3Cpath%20d=%22M250%20465L288%20510M288%20465L250%20510%22/%3E%3Cpath%20d=%22M250%20510L288%20555M288%20510L250%20555%22/%3E%3Cpath%20d=%22M250%20555L288%20600M288%20555L250%20600%22/%3E%3Cpath%20d=%22M250%20150L269%2062L288%20150%22/%3E%3Cpath%20d=%22M250%20138H126V168H250%22/%3E%3Cpath%20d=%22M288%20138H552L540%20168H288%22/%3E%3Cpath%20d=%22M300%20140L322%20166%22/%3E%3Cpath%20d=%22M322%20166L344%20140%22/%3E%3Cpath%20d=%22M344%20140L366%20166%22/%3E%3Cpath%20d=%22M366%20166L388%20140%22/%3E%3Cpath%20d=%22M388%20140L410%20166%22/%3E%3Cpath%20d=%22M410%20166L432%20140%22/%3E%3Cpath%20d=%22M432%20140L454%20166%22/%3E%3Cpath%20d=%22M454%20166L476%20140%22/%3E%3Cpath%20d=%22M476%20140L498%20166%22/%3E%3Cpath%20d=%22M498%20166L520%20140%22/%3E%3Cpath%20d=%22M520%20140L542%20166%22/%3E%3Cpath%20d=%22M542%20166L552%20140%22/%3E%3Cpath%20d=%22M269%2062L546%20139%22/%3E%3Cpath%20d=%22M269%2062L128%20139%22/%3E%3Cpath%20d=%22M288%20150H322V182H288%22/%3E%3Cpath%20d=%22M250%20600L206%20648%22/%3E%3Cpath%20d=%22M288%20600L332%20648%22/%3E%3Cpath%20d=%22M228%20625H310%22/%3E%3Cpath%20d=%22M206%20648H332%22/%3E%3Cpath%20d=%22M172%20654H366%22/%3E%3Cpath%20d=%22M436%20168V356%22/%3E%3C/g%3E%3Cg%20fill='%23191B1F'%20opacity='0.09'%3E%3Cpath%20d='M120%20148H160V194H120Z'/%3E%3Cpath%20d='M422%20356H450V380H422Z'/%3E%3Cpath%20d='M206%20640H332V650H206Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
   transform:scaleX(-1);
}
@media(max-width:1000px){.heros::after{display:none;}}

/* Le nom utilise une grotesque industrielle plus franche que le reste du site */
.nom{
  font-family:'Archivo', system-ui, sans-serif;
  font-weight:900;
  font-size:clamp(2.7rem,11vw,7.6rem);
  line-height:.92; letter-spacing:-.012em; text-transform:uppercase;
  margin-block:.4rem;
}
.nom span{display:block;}
.nom .creux{
  color:transparent;
  -webkit-text-stroke:2.2px var(--bleu);
  paint-order:stroke fill;
}

.accroche{max-width:47ch; margin-top:1.7rem;}
.accroche strong{font-weight:600; box-shadow:inset 0 -.45em 0 rgba(255,197,61,.55);}

.actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem;}

/* ==========================================================================
   PARCOURS : un itineraire
   Une voie en pointilles descend dans la gouttiere de gauche. Chaque etape
   porte son propre segment, donc l'alignement suit la hauteur des cartes.
   Les bornes indiquent la distance depuis l'etape precedente.
   ========================================================================== */

css .parcours{ position:relative; isolation:isolate; background:var(--papier); }
.parcours::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.26; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='170'%20height='170'%20filter='url(%2523g)'%20opacity='0.18'/%3E%3C/svg%3E");
  background-size:170px 170px;
}

.notice{
  font-family:var(--tech); font-size:.7rem; letter-spacing:.05em;
  line-height:1.75; color:#33352E;
  max-width:none; text-align:justify;
  margin-bottom:1.4rem;
  border-block:1.5px solid rgba(25,27,31,.22); padding-block:.9rem;
}

.resume{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.4rem;}
.resume span{
  font-family:var(--tech); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gris);
  border:1.5px solid var(--trait); border-radius:999px;
  background:rgba(255,255,255,.7); padding:.42rem .95rem;
}
.resume span b{color:var(--encre); font-weight:500;}

/* ==========================================================================
   PROJETS
   ========================================================================== */
.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1.6rem;}
.fiche{
  background:var(--papier); border:1.5px solid var(--encre);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fiche:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--bleu);}
.fiche .cadre{border:none; border-bottom:1.5px solid var(--encre); aspect-ratio:16/9;}
.fiche-texte{padding:1.3rem; display:flex; flex-direction:column; gap:.65rem; flex:1;}
.fiche .ref{
  font-family:var(--tech); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gris);
  display:flex; justify-content:space-between; gap:.75rem;
  border-bottom:1px solid var(--trait); padding-bottom:.5rem;
}
.fiche h3{font-family:var(--display); font-weight:600; font-size:1.2rem; line-height:1.2; letter-spacing:-.015em;}
.fiche p{font-size:.94rem; flex:1;}

.etiquettes{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem;}
.etiquettes span{
  font-family:var(--tech); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--encre);
  padding:.2rem .45rem; color:var(--encre); background:var(--papier);
}

/* ---------- Nomenclature ---------- */
.nomenclature{width:100%; border-collapse:collapse; background:var(--papier); border:1.5px solid var(--encre); font-size:.93rem;}
.nomenclature th{
  font-family:var(--tech); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; text-align:left; padding:.7rem .9rem;
  background:var(--encre); color:var(--papier); font-weight:500;
}
.nomenclature td{padding:.75rem .9rem; border-top:1px solid var(--trait); vertical-align:top;}
.nomenclature td:first-child{
  font-family:var(--tech); font-size:.67rem; letter-spacing:.07em;
  text-transform:uppercase; white-space:nowrap; color:var(--gris); width:1%;
}
.jauge{display:flex; gap:3px; align-items:center;}
.jauge i{width:15px; height:7px; background:var(--trait); display:block;}
.jauge i.on{background:var(--bleu);}

/* ---------- Fiches projet cliquables ---------- */
.fiche.cliquable{position:relative;}
.fiche.cliquable h3 a{
  text-decoration:none;
  background-image:linear-gradient(var(--bleu),var(--bleu));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease;
}
.fiche.cliquable h3 a::after{content:''; position:absolute; inset:0; z-index:4;}
.fiche.cliquable:hover h3 a{background-size:100% 2px;}
.fiche.cliquable:focus-within{outline:2.5px solid var(--bleu); outline-offset:3px;}
.fiche .voir-plus{color:var(--bleu); margin-top:.4rem;}

/* ---------- Renvoi vers la page Moi ---------- */
.renvoi{
  border:1.5px solid var(--encre); background:var(--papier);
  border-left:6px solid var(--rouge);
  padding:clamp(1.5rem,4vw,2.4rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem;
}
.renvoi h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,4.5vw,2.4rem);
  text-transform:uppercase; letter-spacing:-.03em; line-height:1;
}
.renvoi p{max-width:42ch; margin-top:.6rem; color:var(--gris);}

@media(max-width:700px){
  /* Le tableau de compétences devient une liste de blocs */
  .nomenclature thead{display:none;}
  .nomenclature, .nomenclature tbody, .nomenclature tr, .nomenclature td{
    display:block; width:auto;
  }
  .nomenclature tr{border-top:1.5px solid var(--trait); padding:.8rem .9rem;}
  .nomenclature tr:first-child{border-top:none;}
  .nomenclature td{border:none; padding:.1rem 0;}
  .nomenclature td:first-child{
    width:auto; color:var(--bleu); font-size:.62rem; margin-bottom:.25rem;
  }
  .nomenclature td:last-child{margin-top:.5rem;}
}

@media(max-width:640px){
  .heros{padding-block:2rem 2rem;}
  .nom{font-size:clamp(2.2rem,13vw,3.4rem); line-height:.95;}
  .heros .role{font-size:.62rem; letter-spacing:.14em;}
  .cote text{font-size:8.5px;}
  .actions{flex-direction:column; align-items:stretch;}
  .actions .bouton{text-align:center;}
  .renvoi{flex-direction:column; align-items:flex-start;}
  .fiche-texte{padding:1.05rem;}
}

/* ==========================================================================
   CARTOUCHES DE SECTION
   Meme ecriture que la page Moi : un gros chiffre en contour gris pose
   derriere le titre, un filet, puis une pastille de contexte.
   ========================================================================== */
.cartouche{
  position:relative;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border:none; background:none;
  padding-top:.6rem; margin-bottom:2.2rem;
}
.cartouche .num{
  position:absolute; left:-.06em; top:-.42em; z-index:0;
  padding:0; background:none; color:transparent;
  font-family:var(--display); font-weight:800;
  font-size:clamp(4.5rem,13vw,9rem); line-height:1;
  -webkit-text-stroke:2.2px rgba(27,79,216,.42);   color:rgba(27,79,216,.07);
  letter-spacing:-.04em; pointer-events:none;
}
.cartouche h2{
  position:relative; z-index:1; flex:0 0 auto; padding:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.8rem,5.2vw,2.8rem);
  text-transform:uppercase; letter-spacing:-.035em; line-height:1;
  display:inline-block;
}
.cartouche h2::after{
  content:''; position:absolute; left:-.03em; right:-.03em; bottom:.05em;
  height:.13em; border-radius:999px;
  background:var(--bleu); opacity:.26; z-index:-1;
}
.parcours .cartouche h2::after{background:var(--rouge); opacity:.3;}
.cartouche .fil{
  position:relative; z-index:1;
  flex:1; min-width:40px; height:1.5px; border-radius:999px;
  background:var(--trait);
}
.cartouche .meta{
  position:relative; z-index:1;
  display:inline-flex; align-items:center;
  border:1.5px solid var(--encre); border-radius:999px;
  padding:.42rem 1rem;
  font-family:var(--tech); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris);
  background:var(--papier); white-space:nowrap;
}
@media(max-width:640px){
  .cartouche .num{font-size:4.5rem; top:-.3em;}
  .cartouche .fil{display:none;}
  .cartouche .meta{font-size:.53rem; padding:.35rem .8rem;}
}

/* ==========================================================================
   EXPERIENCES : composition decalee
   Chaque experience est adossee a son annee ecrite en tres grand, en
   contour gris. La fiche se pose par dessus, alternativement a droite
   et a gauche.
   ========================================================================== */
.experiences{display:grid; gap:clamp(1.6rem,4vw,3rem); padding-top:.6rem;}

.exp-item{--teinte:var(--bleu); position:relative;}
.exp-fond{
  position:relative; z-index:0; pointer-events:none;   display:block; text-align:center; margin-bottom:.75rem;
  font-family:var(--display); font-weight:800;
  font-size:clamp(3.4rem,8.4vw,6.4rem); line-height:.82;
  color:color-mix(in srgb, var(--teinte) 9%, transparent);   -webkit-text-stroke:2.4px color-mix(in srgb, var(--teinte) 75%, transparent);
  letter-spacing:-.05em; white-space:nowrap;
}
@media(min-width:900px){
  .exp-item.gauche .exp-fond{width:70%; margin-left:auto;}
  .exp-item.droite .exp-fond{width:70%; margin-right:auto;}
  .exp-item.pleine .exp-fond{width:88%; margin-inline:auto;}
}

.exp-carte{
  position:relative; z-index:2;
  border:1.5px solid var(--encre); border-radius:28px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(4px);
  padding:1.7rem 1.8rem 1.6rem;
  box-shadow:0 18px 40px rgba(25,27,31,.11);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.exp-carte::before{
  content:''; position:absolute; left:0; top:24px; bottom:24px; width:6px;
  border-radius:0 999px 999px 0; background:var(--teinte);
}
@media(min-width:900px){
  .exp-item{padding-top:0;}
  .exp-item.gauche .exp-carte{width:70%; margin-left:auto;}
  .exp-item.droite .exp-carte{width:70%; margin-right:auto;}
  .exp-item.pleine .exp-carte{width:88%; margin-inline:auto;}
}

/* ---------- En-tete de fiche ---------- */
.exp-entete{display:flex; align-items:flex-start; gap:1.2rem; justify-content:space-between;}
.exp-lieu{
  font-family:var(--tech); font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gris); margin-bottom:.5rem;
}
.exp-lieu b{
  color:var(--encre); font-weight:500;
  border-bottom:2.5px solid var(--teinte); padding-bottom:.12rem;
}
.exp-carte h3{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.2rem,2.5vw,1.6rem); line-height:1.14;
  letter-spacing:-.028em;
}
.exp-carte h3 a{
  text-decoration:none;
  background-image:linear-gradient(var(--teinte),var(--teinte));
  background-size:0 2.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .28s ease;
}
.exp-carte h3 a::after{content:''; position:absolute; inset:0; z-index:4;}
.exp-carte.cliquable:hover{transform:translateY(-6px); box-shadow:0 26px 54px rgba(25,27,31,.17);}
.exp-carte.cliquable:hover h3 a{background-size:100% 2.5px;}
.exp-carte.cliquable:focus-within{outline:2.5px solid var(--teinte); outline-offset:4px;}
.exp-carte .fonction{
  font-family:var(--tech); font-size:.63rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gris); margin-top:.55rem;
}
.exp-carte .texte{margin-top:1rem; line-height:1.78;}
.exp-carte .texte + .texte{margin-top:.7rem;}

.exp-vignette{
  position:relative; flex:0 0 122px; width:122px; aspect-ratio:1/1;
  border:1.5px solid var(--encre); border-radius:24px;
  background:var(--papier);
  overflow:hidden;
}
.exp-vignette.vide{
  background:repeating-linear-gradient(45deg, #F0EEE7 0 6px, var(--papier) 6px 12px);
}
.exp-vignette img{width:100%; height:100%; object-fit:contain; padding:8px; position:relative; z-index:1;}
.exp-vignette.vide img{display:none;}
.exp-vignette.vide::before{
  content:'logo'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--tech); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}

.marqueur{
  display:inline-block; font-family:var(--tech); font-size:.55rem;
  letter-spacing:.11em; text-transform:uppercase;
  background:var(--teinte); color:var(--papier);
  border-radius:999px; padding:.2rem .6rem;
  margin-left:.5rem; vertical-align:middle;
}
.voir-plus{
  display:inline-block; margin-top:1.1rem;
  font-family:var(--tech); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--teinte);
}
.voir-plus::after{content:' \2192'; display:inline-block; transition:margin-left .2s ease;}
.exp-carte.cliquable:hover .voir-plus::after{margin-left:.4rem;}

/* ---------- Le PFE, en tete ---------- */
.exp-item.destination .exp-fond{-webkit-text-stroke-color:rgba(217,65,47,.75);}
.destination .exp-carte{
  border:2.5px dashed var(--rouge);
  background:linear-gradient(150deg,rgba(255,255,255,.96) 0%, rgba(255,244,242,.96) 100%);
  box-shadow:0 22px 50px rgba(217,65,47,.18);
}
.destination .exp-carte::before{background:var(--rouge); width:7px;}
.destination .exp-lieu b{border-bottom-color:var(--rouge);}
.destination .exp-vignette{border-style:dashed; border-color:var(--rouge);}
.destination .exp-vignette{flex:0 0 146px; width:146px;}
.destination .exp-vignette.vide::before{content:'?'; font-size:1.6rem; color:var(--rouge);}
.badge-recherche{
  display:inline-block; vertical-align:middle; margin-left:.6rem;
  font-family:var(--tech); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  background:var(--rouge); color:var(--papier);
  border-radius:999px; padding:.24rem .65rem;
  animation:battement 2.6s ease-in-out infinite;
}
@keyframes battement{
  0%,100%{box-shadow:0 0 0 0 rgba(217,65,47,.5);}
  55%{box-shadow:0 0 0 8px rgba(217,65,47,0);}
}
.destination .bouton{background:var(--rouge); border-color:var(--rouge); border-radius:999px;}
.destination .bouton:hover{background:var(--encre); border-color:var(--encre); color:var(--papier);}
.destination .etiquettes span{border-color:var(--rouge); color:var(--rouge);}

/* ---------- Telephone ---------- */
@media(max-width:899px){
  .exp-item{padding-top:0;}
  .exp-fond{font-size:clamp(3rem,12vw,4.4rem); top:0; left:0 !important; right:auto !important; transform:none !important;}
  .exp-carte{padding:1.4rem 1.25rem 1.35rem; border-radius:22px;}
  .exp-carte::before{width:5px; top:16px; bottom:16px;}
  .exp-entete{flex-direction:column; gap:.9rem;}
  .exp-vignette, .destination .exp-vignette{flex:0 0 104px; width:104px;}
}