/* =========================================================================
   axelcasanovas.fr — feuille de style
   Reprise fidele de la maquette Proposition VF, convertie en CSS statique.
   ========================================================================= */

:root{
  --creme:#F6F1E5;      /* fond principal */
  --creme-2:#EDE4CF;    /* fond des sections alternees */
  --champ:#FDFAF2;      /* fond des champs de formulaire */
  --encre:#2E2A23;      /* titres */
  --texte:#3A362E;      /* texte courant */
  --texte-2:#54503F;    /* paragraphes */
  --gris:#6E675A;       /* texte secondaire — contraste 4,97:1, conforme AA */
  --trait:#DCD2BB;      /* filets */
  --bord:#D8D1BE;       /* bordures de champs */
  --accent:#7A2E28;
  --accent-fonce:#571F1B;

  /* --- Contraste : voir constat RWD-02 de l audit -----------------------
     Ces deux gris sont sous le seuil WCAG AA (4,5:1) sur le fond creme :
       --meta   #8B8474 -> 3,30:1
       --label  #B4AC9C -> 2,00:1
     Valeurs d origine conservees (decision de design reservee au client).
     Pour rendre le site conforme, remplacer par :
       --meta:#6E675A;  --label:#8B8474;
     --------------------------------------------------------------------- */
  --meta:#8B8474;
  --label:#B4AC9C;

  --serif:'Marcellus',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --lmax:1300px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--creme);color:var(--texte);
  font-family:var(--sans);font-weight:300;
  display:flex;flex-direction:column;min-height:100vh;
}
img{max-width:100%;}
a{color:var(--accent);}
a:hover{color:var(--accent-fonce);}
::selection{background:var(--accent);color:var(--creme);}

/* Visibilite du focus clavier — absente de la maquette d origine */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* Lien d evitement pour la navigation au clavier */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--creme);padding:12px 20px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0;color:var(--creme);}

.pad{padding-left:52px;padding-right:52px;}
.wrap{max-width:var(--lmax);margin:0 auto;width:100%;box-sizing:border-box;}

/* ---------- En-tete ---------- */
.hdr{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 52px;background:var(--creme);position:sticky;top:0;z-index:10;
}
.hdr img{height:30px;display:block;width:auto;}
.hdr nav{
  display:flex;align-items:center;gap:30px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.hdr nav a{color:var(--texte);text-decoration:none;padding:8px 2px;}
.hdr nav a:hover,.hdr nav a[aria-current="page"]{color:var(--accent);}
.lang{color:var(--texte);}
.lang span{color:var(--label);}

main{flex:1;}

/* ---------- Accueil : hero ---------- */
.heroimg{width:100%;height:72vh;object-fit:cover;display:block;}
.herocard{
  position:relative;margin:-96px 0 0;background:var(--creme);
  padding:48px 52px;max-width:660px;animation:fadeUp .8s ease both;
}
h1{font-family:var(--serif);font-weight:400;color:var(--encre);margin:0;text-wrap:balance;}
.herocard h1{font-size:40px;line-height:1.25;margin-bottom:20px;}
.herocard p{font-size:16px;line-height:1.85;margin:0 0 26px;color:var(--texte-2);}
.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}

.btn{
  color:var(--accent);text-decoration:none;border:1px solid var(--accent);
  padding:11px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-block;transition:background .2s ease,color .2s ease;
}
.btn:hover{background:var(--accent);color:var(--creme);}
.lien{font-size:14px;letter-spacing:.06em;}

/* ---------- Sections ---------- */
.sec{padding:88px 52px 0;}
.sec-alt{margin-top:104px;background:var(--creme-2);padding-left:52px;padding-right:52px;}
.sec-alt .wrap{padding:88px 0;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:44px;}
h2{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--encre);margin:0;}
.sec-head a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;}

/* ---------- Mosaique de projets ---------- */
.mos{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 32px;align-items:start;}
.mos>a{text-decoration:none;color:var(--texte);display:block;}
.mos img{width:100%;object-fit:cover;display:block;}
.mos .titre{
  border-top:1px solid var(--trait);margin-top:14px;padding-top:12px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.mos .titre b{font-family:var(--serif);font-size:24px;color:var(--encre);font-weight:400;}
.mos .statut{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--meta);white-space:nowrap;
}
.mos .typo{font-size:13.5px;color:var(--meta);margin-top:4px;}

/* Gabarits de la selection d accueil (4 projets) */
.f1{grid-column:1/span 6;}                  .f1 img{aspect-ratio:4/3;}
.f2{grid-column:8/span 5;margin-top:64px;}  .f2 img{aspect-ratio:4/5;}
.f3{grid-column:1/span 5;margin-top:40px;}  .f3 img{aspect-ratio:4/5;}
.f4{grid-column:7/span 6;}                  .f4 img{aspect-ratio:4/3;}

/* Gabarits de la page Projets (6 projets) */
.m1{grid-column:1/span 8;}                   .m1 img{aspect-ratio:16/10;}
.m2{grid-column:9/span 4;margin-top:88px;}   .m2 img{aspect-ratio:3/4;}
.m3{grid-column:1/span 4;margin-top:48px;}   .m3 img{aspect-ratio:3/4;}
.m4{grid-column:5/span 7;}                   .m4 img{aspect-ratio:16/10;}
.m5{grid-column:1/span 8;margin-top:56px;}   .m5 img{aspect-ratio:16/10;}
.m6{grid-column:9/span 4;margin-top:144px;}  .m6 img{aspect-ratio:3/4;}

/* ---------- Savoir-faire ---------- */
.two{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;}
.sticky{position:sticky;top:32px;}
.sticky img{width:100%;height:auto;display:block;}
.intro{font-size:15px;color:var(--gris);margin:0;max-width:56ch;line-height:1.8;}
.sf-head{margin-bottom:52px;}
.sf-head h2{margin-bottom:12px;}
.skill{
  display:grid;grid-template-columns:72px 1fr;gap:28px;padding:30px 0;
  border-top:1px solid var(--trait);align-items:start;
}
.skill:last-child{border-bottom:1px solid var(--trait);}
.skill .num{font-family:var(--serif);font-size:38px;color:var(--accent);line-height:1;}
.skill h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--encre);margin:0 0 10px;}
.skill p{font-size:15px;line-height:1.9;margin:0;color:var(--gris);}

/* ---------- Appel a l action ---------- */
.cta{padding:96px 52px;text-align:center;}
.cta .accroche{font-family:var(--serif);font-size:30px;color:var(--encre);margin:0 0 14px;}
.cta .coord{font-size:15px;margin:0 0 28px;color:var(--gris);letter-spacing:.04em;}

/* ---------- Pages internes ---------- */
.page{max-width:var(--lmax);margin:0 auto;padding:56px 52px 110px;width:100%;box-sizing:border-box;}
.page>h1{font-size:40px;margin-bottom:14px;}
.page .chapeau{font-size:15px;color:var(--gris);margin:0 0 56px;max-width:54ch;line-height:1.8;}

/* ---------- Page projet ---------- */
.proj-head{max-width:var(--lmax);margin:0 auto;padding:48px 52px 0;width:100%;box-sizing:border-box;}
.proj-head h1{font-size:44px;margin-bottom:24px;line-height:1.15;}
.fiche{
  display:flex;flex-wrap:wrap;gap:12px 36px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--meta);
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:16px 0;
}
.fiche .st{color:var(--accent);}
.credit{font-size:13.5px;line-height:1.75;color:var(--gris);margin:22px 0 0;max-width:70ch;}
.pcover{width:100%;height:70vh;min-height:320px;object-fit:cover;display:block;}
.pcoverlink{display:block;margin:44px 0 0;cursor:zoom-in;padding:0;border:none;background:none;width:100%;}
.proj-body{max-width:var(--lmax);margin:0 auto;padding:56px 52px 0;width:100%;box-sizing:border-box;}
.proj-txt{display:grid;grid-template-columns:7fr 4fr;gap:64px;}
.proj-txt p{font-size:16px;line-height:1.9;margin:0 0 20px;color:var(--texte-2);}
.mission-t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:12px;}
.mission{margin:0;padding:0;}
.mission li{
  font-size:14.5px;color:var(--gris);padding:9px 0;
  border-top:1px solid var(--trait);list-style:none;
}

/* ---------- Galerie ---------- */
.gal{display:flex;flex-wrap:wrap;gap:24px;margin-top:64px;}
.gal>button{
  display:block;flex-grow:1;cursor:zoom-in;position:relative;overflow:hidden;
  padding:0;border:none;background:none;
}
.gal img{display:block;object-fit:cover;width:100%;transition:transform .6s ease;}
.gal>button:hover img{transform:scale(1.03);}
.g1{width:100%;} .g1 img{aspect-ratio:16/8;}
.g2{width:38%;}  .g2 img{aspect-ratio:4/5;}
.g3{width:58%;}  .g3 img{aspect-ratio:4/3;}
.g4{width:48%;}  .g4 img{aspect-ratio:4/3;}
.g5{width:48%;}  .g5 img{aspect-ratio:4/3;}
.g6{width:58%;}  .g6 img{aspect-ratio:4/3;}
.g7{width:38%;}  .g7 img{aspect-ratio:4/5;}

.pnav{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--trait);margin:72px 0 90px;padding-top:28px;gap:24px;
}
/* padding vertical : porte la zone tactile a 44px sans changer l apparence */
.pnav a{color:var(--texte);text-decoration:none;font-size:14px;padding:12px 0;}
.pnav a:hover{color:var(--accent);}
.pnav .mid{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}

/* ---------- A propos ---------- */
.apropos{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:start;}
/* Portrait affiche en entier : height:auto neutralise l attribut height de la
   balise (indication de presentation du navigateur) qui figeait la hauteur et
   forcait un recadrage. Le ratio natif de la photo fait foi, aucun rognage. */
.apropos>img{width:100%;height:auto;display:block;}
.apropos p{font-size:16px;line-height:1.9;margin:0 0 18px;color:var(--texte-2);}
.apropos h1{margin-bottom:30px;}
.sstitre{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);font-weight:400;margin:22px 0 14px;font-family:var(--sans);
}
.outils{font-size:15px;line-height:1.9;margin:0 0 40px;color:var(--gris);}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:start;}
.contact h1{margin-bottom:26px;}
.contact .intro-c{font-size:16px;line-height:1.9;margin:0 0 30px;color:var(--texte-2);}
.coord-l{font-size:17px;margin:0 0 10px;}
.coord-l a{text-decoration:none;}
.zone{font-size:14px;margin:0 0 8px;color:var(--gris);}
.reseaux{font-size:14px;margin:26px 0 0;display:flex;gap:22px;}

form{display:flex;flex-direction:column;gap:16px;}
label.champ{display:flex;flex-direction:column;gap:6px;}
label.champ>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);}
input,select,textarea{
  font-family:var(--sans);font-weight:300;font-size:15px;padding:13px 16px;
  border:1px solid var(--bord);background:var(--champ);color:var(--texte);
  outline:none;width:100%;
}
textarea{resize:vertical;}
.consent{
  display:flex;gap:10px;font-size:13px;line-height:1.6;
  color:var(--gris);align-items:flex-start;
}
.consent input{width:auto;margin-top:3px;flex:none;}
.envoi{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
button[type=submit]{
  font-family:var(--sans);background:var(--accent);color:var(--creme);
  border:1px solid var(--accent);padding:12px 32px;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;width:auto;
}
button[type=submit]:hover{background:var(--accent-fonce);}
button[type=submit][disabled]{opacity:.6;cursor:progress;}
.msg{font-size:13.5px;line-height:1.6;margin:0;color:var(--gris);}
.msg.err{color:var(--accent);}
.pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ---------- Pages legales ---------- */
.legal{max-width:760px;margin:0 auto;padding:56px 52px 110px;width:100%;box-sizing:border-box;}
.legal h1{font-size:32px;margin-bottom:26px;}
.legal h2{font-size:19px;margin:38px 0 10px;}
.legal p,.legal li{font-size:15px;line-height:1.85;color:var(--gris);}
.legal a{overflow-wrap:anywhere;}
.avert{
  border-left:3px solid var(--accent);background:var(--creme-2);
  padding:16px 20px;margin:0 0 32px;
}
.avert p{margin:0;color:var(--texte-2);}

/* ---------- Pied de page ---------- */
footer{background:var(--creme-2);padding:52px 52px 30px;}
.fgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;
  max-width:var(--lmax);margin:0 auto;}
.fgrid>img{height:30px;display:block;justify-self:start;width:auto;}
.fgrid nav{display:flex;gap:26px;justify-self:center;font-size:14px;flex-wrap:wrap;}
.fgrid nav a{color:var(--texte);text-decoration:none;padding:6px 0;}
.fgrid nav a:hover{color:var(--accent);}
.fcoord{justify-self:end;text-align:right;font-size:14px;line-height:1.9;}
.fcoord a{text-decoration:none;color:var(--texte);}
.fcoord a:hover{color:var(--accent);}
.flegal{display:flex;gap:24px;justify-content:center;margin-top:38px;font-size:12px;}
.flegal a{color:var(--meta);padding:8px 0;}

/* ---------- Visionneuse ---------- */
.lb{
  position:fixed;inset:0;z-index:60;background:rgba(26,23,18,.95);
  display:flex;flex-direction:column;animation:fadeUp .28s ease both;
}
.lb[hidden]{display:none;}
.lbtop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;flex:none;}
.lbtop span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#C9BFA9;}
.lbmid{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:0 108px 26px;position:relative;}
.lbmid img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.lbbtn{
  appearance:none;position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border:1px solid rgba(246,241,229,.35);
  background:rgba(26,23,18,.55);color:var(--creme);font-size:20px;line-height:1;
  cursor:pointer;z-index:2;
}
.lbbtn:hover{background:rgba(246,241,229,.16);}
.lbprev{left:28px;} .lbnext{right:28px;}
.lbclose{
  appearance:none;background:none;border:1px solid rgba(246,241,229,.35);
  color:var(--creme);font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;min-width:44px;min-height:44px;padding:0 18px;cursor:pointer;
}
.lbclose:hover{background:rgba(246,241,229,.12);}
.lb :focus-visible{outline:2px solid var(--creme);outline-offset:2px;}

/* =========================================================================
   Adaptatif
   ========================================================================= */
@media (max-width:1180px) and (min-width:861px){
  .two{gap:44px;}
  .gal{gap:18px;}
  .gal>button{width:calc(50% - 9px);}
  .gal img{aspect-ratio:4/3;}
  .lbmid{padding:0 84px 22px;}
  .lbbtn{width:48px;height:48px;}
  .lbprev{left:18px;} .lbnext{right:18px;}
}

@media (max-width:860px){
  .hdr{flex-direction:column;align-items:center;gap:14px;padding:16px 20px;}
  .hdr nav{flex-wrap:wrap;gap:18px;justify-content:center;}
  .pad,.sec,.sec-alt,.cta,.page,.proj-head,.proj-body,.legal,footer{padding-left:20px;padding-right:20px;}
  .heroimg{height:46vh;}
  .herocard{position:static;margin:0;max-width:none;padding:32px 20px;}
  .herocard h1{font-size:32px;}
  .two,.proj-txt,.apropos,.contact{grid-template-columns:1fr;gap:36px;}
  .sec-alt .wrap{padding:64px 0;}
  .sticky{position:static;}
  .skill{grid-template-columns:44px 1fr;gap:16px;}
  .skill .num{font-size:30px;}
  .mos{display:block;}
  .mos>a{margin:0 0 40px;}
  .mos img{aspect-ratio:4/3 !important;}
  .gal{gap:14px;margin-top:40px;}
  .gal>button{width:100%;}
  .gal img{aspect-ratio:4/3 !important;}
  .pnav{flex-direction:column;align-items:flex-start;gap:16px;}
  .fgrid{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center;}
  .fcoord{justify-self:center;text-align:center;}
  .pcover{height:44vh;min-height:220px;}
  .proj-head h1{font-size:32px;}
  .page>h1,.apropos h1,.contact h1{font-size:32px;}
  .lbtop{padding:12px 16px;}
  .lbmid{padding:0 10px 82px;}
  .lbbtn{top:auto;bottom:18px;transform:none;width:46px;height:46px;}
  .lbprev{left:22px;} .lbnext{right:22px;}
}