/* v10 : si tu ne vois pas cette ligne sur GitHub, le fichier n'est pas à jour */
/* ==========================================================================
   BASE : variables, typographie, composants partagés par toutes les pages
   Ne touche à ce fichier que si tu veux changer les couleurs ou les polices.
   ========================================================================== */

:root{
  /* Couleurs : palette claire */
  --papier:#FCFBF9;
  --papier-2:#F1F0EA;
  --encre:#191B1F;
  --gris:#67685F;
  --trait:#CFCEC6;

  /* Accents : un par famille d'expérience */
  --bleu:#1B4FD8;     /* formation */
  --jaune:#FFC53D;    /* stage */
  --vert:#1B8A5A;     /* international */
  --rouge:#D9412F;    /* objectif, page Moi */
  --violet:#6B4BD6;

  /* Ciel et terre pour la coupe du parcours */
  --ciel-haut:#CBE1F6;
  --ciel-bas:#EDF4FB;
  --terre-haut:#E7DCC6;
  --terre-bas:#C9B896;

  /* Polices */
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --corps:'Instrument Sans', system-ui, sans-serif;
  --tech:'IBM Plex Mono', ui-monospace, monospace;
   
   --marge:1.25rem;
  --marge:clamp(1.25rem, 5vw, 5rem);
  --max:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--papier);
  color:var(--encre);
  font-family:var(--corps);
  font-size:clamp(1rem,.95rem + .2vw,1.07rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}

:focus-visible{outline:2.5px solid var(--bleu); outline-offset:3px;}

.enveloppe{max-width:var(--max); margin-inline:auto; padding-inline:var(--marge); position:relative; z-index:1;}
.section{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(85% 65% at 10% 0%, rgba(27,79,216,.055), transparent 60%),
    radial-gradient(70% 55% at 95% 100%, rgba(255,197,61,.08), transparent 65%);
}
.section::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(25,27,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,27,31,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2));
}
.fond-alt{
  background:
    radial-gradient(90% 70% at 90% 0%, rgba(107,75,214,.07), transparent 62%),
    radial-gradient(70% 60% at 6% 100%, rgba(27,138,90,.09), transparent 65%),
    var(--papier-2);
}

/* ---------- Barre de navigation ---------- */
.bandeau{
  position:sticky; top:0; z-index:60;
  background:#14161C;
  color:#F4F2EC;
  border-bottom:1.5px solid #14161C;
}
.bandeau a{color:inherit;}
.sigle{color:rgba(244,242,236,.6);}
.bandeau nav a.ici{border-bottom-color:#7B93FF;}
.bandeau-int{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.7rem;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--marge);
}
.sigle{font-family:var(--tech); font-size:.68rem; letter-spacing:.16em; font-weight:500;}
.bandeau nav{display:flex; gap:1.25rem; flex-wrap:wrap;}
.bandeau nav a{
  font-family:var(--tech); font-size:.67rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  padding-bottom:2px; border-bottom:1.5px solid transparent;
  transition:border-color .18s;
}
.bandeau nav a:hover{border-bottom-color:var(--jaune);}
.bandeau nav a.ici{border-bottom-color:var(--bleu);}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-block;
  font-family:var(--tech); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  padding:.78rem 1.3rem;
  border:1.5px solid var(--encre);
  background:var(--encre); color:var(--papier);
  transition:background .18s, color .18s, transform .18s;
}
.bouton:hover{background:var(--jaune); color:var(--encre); transform:translateY(-2px);}
.bouton.vide{background:transparent; color:var(--encre);}
.bouton.vide:hover{background:var(--encre); color:var(--papier);}

/* ---------- Trait de cote (motif signature) ---------- */
.cote{display:block; width:100%; height:26px; overflow:visible;}
.cote line{stroke:var(--trait); stroke-width:1.25; fill:none;}
.cote .ligne{stroke-dasharray:1000; stroke-dashoffset:1000; animation:tracer 1.4s cubic-bezier(.2,.7,.3,1) forwards;}
.cote text{
  font-family:var(--tech); font-size:10.5px; letter-spacing:.1em;
  fill:var(--gris); text-transform:uppercase;
}
@keyframes tracer{to{stroke-dashoffset:0;}}

/* ---------- Cartouche de section ---------- */
.cartouche{
  display:flex; align-items:stretch;
  border:1.5px solid var(--encre);
  background:var(--papier);
  margin-bottom:2.4rem;
}
.cartouche .num{
  display:flex; align-items:center; padding-inline:.9rem;
  background:var(--encre); color:var(--papier);
  font-family:var(--tech); font-size:.72rem; font-weight:500; letter-spacing:.1em;
}
.cartouche h2{
  flex:1; padding:.62rem .95rem;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,3.2vw,1.6rem);
  letter-spacing:-.015em; text-transform:uppercase; line-height:1.2;
}
.cartouche .meta{
  display:none; align-items:center; padding-inline:.95rem;
  border-left:1.5px solid var(--encre);
  font-family:var(--tech); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris); white-space:nowrap;
}
@media(min-width:720px){.cartouche .meta{display:flex;}}

/* ---------- Cadre image avec repère si le fichier manque ---------- */
.cadre{
  position:relative;
  border:1.5px solid var(--encre);
  background:var(--papier);
  overflow:hidden;
  aspect-ratio:16/10;
}
.cadre.vide{
  background:
    repeating-linear-gradient(45deg,
      var(--papier-2) 0 8px, var(--papier) 8px 16px);
}
.cadre::after{display:none;}
.cadre img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
.cadre.vide img{display:none;}
.cadre.vide::before{
  content:'à déposer'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--tech); font-size:.65rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}

/* ---------- Pied de page / cartouche de plan ---------- */
.pied{border-top:1.5px solid var(--encre); background:var(--papier-2); margin-top:clamp(3rem,7vw,5rem);}
.pied-int{max-width:var(--max); margin-inline:auto; padding-inline:var(--marge); padding-block:2.6rem;}
.contact-titre{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.8rem,6vw,3.2rem);
  text-transform:uppercase; letter-spacing:-.03em; line-height:.95;
  margin-bottom:1.5rem;
}
.liens{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.4rem;}
.bloc-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border:1.5px solid var(--encre); background:var(--papier);}
.cellule{padding:.7rem .85rem; border-right:1px solid var(--trait); border-bottom:1px solid var(--trait);}
.cellule:last-child{border-right:none;}
.cellule .cle{display:block; font-family:var(--tech); font-size:.57rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gris); margin-bottom:.15rem;}
.cellule .val{font-family:var(--tech); font-size:.78rem; font-weight:500;}

/* ---------- Apparition au défilement ----------
   Règle de sécurité : le contenu est VISIBLE par défaut. Il n'est masqué
   pour être animé que si le JavaScript a bien démarré (classe .js posée
   dans le <head>). Si un script échoue, la page reste lisible. */
.revele{opacity:1; transform:none;}
.js .revele{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .revele.vu{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .revele{opacity:1; transform:none; transition:none;}
  .cote .ligne{animation:none; stroke-dashoffset:0;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;}
}

/* ==========================================================================
   TÉLÉPHONE : règles communes à toutes les pages
   ========================================================================== */
@media(max-width:640px){
  .bandeau-int{
    flex-direction:column; align-items:flex-start;
    gap:.45rem; padding-block:.6rem;
  }
  .bandeau nav{gap:.9rem; row-gap:.35rem;}
  .bandeau nav a{font-size:.62rem;}

  .cartouche{flex-wrap:wrap;}
  .cartouche h2{font-size:1.05rem; padding:.55rem .8rem;}

  .bloc-grille{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cellule:nth-child(2n){border-right:none;}

  .liens{flex-direction:column; align-items:stretch;}
  .liens .bouton{text-align:center;}

  .contact-titre{font-size:clamp(1.6rem,9vw,2.4rem);}
  .section{padding-block:2.2rem;}

   .enveloppe, .bandeau-int, .pied-int{padding-inline:1.25rem;}
}
/* ---------- Lightbox photos ---------- */
.cadre img{cursor:zoom-in;}
.lightbox{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,20,20,.92);
  opacity:0; visibility:hidden;
  transition:opacity .22s;
  padding:4vh 4vw;
}
.cadre-contain img{object-fit:contain; background:var(--papier-2);}
.lightbox.ouverte{opacity:1; visibility:visible;}
.lightbox img{
  max-width:100%; max-height:100%;
  border-radius:12px;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  cursor:zoom-out;
}
/* Rien ne doit pouvoir déborder horizontalement sur un écran étroit */
html, body{max-width:100%; overflow-x:clip;}
img, svg, video, table{max-width:100%;}