/* Arpentages — base graphique */
:root{--ardoise:#26343a;--corail:#c96f5b;--sable:#f3eee6;--papier:#fffdf9;--texte:#263238;--bordure:#d9d0c5;--largeur:72rem;--texte-base:1.08rem;--texte-petit:.96rem;--texte-nav:1rem}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--texte);background:var(--papier);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:var(--texte-base);line-height:1.65}
header{width:100%;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem max(1.25rem,calc(50vw - var(--largeur)/2));background:rgba(255,253,249,.97);border-bottom:1px solid var(--bordure);box-shadow:0 2px 12px rgba(38,52,58,.08);backdrop-filter:blur(8px)}
header>a{display:block;padding:.25rem 0}
header>a img{display:block;width:min(12rem,40vw);height:auto}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem .75rem;padding:.25rem 0}
a{color:var(--ardoise);text-underline-offset:.2em}
nav a{padding:.45rem .2rem;font-size:var(--texte-nav);font-weight:650;text-decoration:none;white-space:nowrap}
nav a:hover,nav a:focus-visible{color:var(--corail);text-decoration:underline}
main{width:min(100% - 2rem,var(--largeur));margin-inline:auto}
section{margin:0 calc(50% - 50vw);padding:clamp(3rem,8vw,7rem) max(1.25rem,calc(50vw - var(--largeur)/2));scroll-margin-top:5.5rem}
section:nth-child(even){background:var(--sable)}
section:first-child{color:#fff;background:var(--ardoise);padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(4rem,8vw,7rem)}
section:first-child a{color:#fff}
h1,h2,h3{line-height:1.2;color:var(--ardoise)}
section:first-child h1,section:first-child h2,section:first-child h3{color:#fff}
h1{max-width:24ch;margin:0 0 1.5rem;font-size:clamp(1.9rem,4vw,3.25rem);letter-spacing:-.03em}
h2{margin:0 0 2rem;font-size:clamp(1.7rem,2.8vw,2.35rem);letter-spacing:-.02em}
h3{margin-top:0;font-size:clamp(1.18rem,1.6vw,1.45rem)}
p{max-width:none;margin-block:1rem}
section:first-child p{max-width:none;font-size:clamp(1rem,1.6vw,1.2rem)}
section:first-child p:last-child{margin-top:2rem;font-size:var(--texte-base);font-weight:650}
section:first-child p a{display:inline-block;margin:.25rem .75rem .25rem 0;padding:.7rem 1rem;border:1px solid currentColor;text-decoration:none}
section:first-child p a:first-child{color:var(--ardoise);background:#fff;border-color:#fff}
article{margin:2rem 0;padding:1.5rem;background:var(--papier);border:1px solid var(--bordure);border-top:.35rem solid var(--corail)}
figure{margin:0 0 1.25rem}figure img,article>img{display:block;max-width:100%;height:auto}
figcaption{margin-top:.5rem;color:#5d686c;font-size:var(--texte-petit)}
details{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bordure)}
summary{cursor:pointer;color:var(--ardoise);font-weight:700}
.logos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem}
.logo-item{display:flex;align-items:center;justify-content:center;min-height:7rem;padding:1rem;background:#fff;border:1px solid var(--bordure);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.logo-item a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}
.logo-item img{display:block;width:100%;height:5rem;object-fit:contain}
.logo-item:hover,.logo-item:focus-within{border-color:var(--corail);box-shadow:0 .4rem 1rem rgba(38,52,58,.12);transform:translateY(-2px)}
.logo-item a:focus-visible{outline:2px solid var(--corail);outline-offset:4px}
blockquote{margin:0;font-size:1.08rem;font-style:italic}
footer{width:min(100% - 2rem,var(--largeur));margin-inline:auto;padding:2rem 0;color:#5d686c;font-size:var(--texte-petit)}
:focus-visible{outline:.2rem solid var(--corail);outline-offset:.2rem}


@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.card2{
    text-align: center;
  max-width: 33%;
  margin-bottom: 1rem;margin:2rem 0;padding:1.5rem;background:var(--sable);border:1px solid var(--bordure);border-top:.35rem solid var(--corail)}

  .card3{
    text-align: center;
  max-width: 31%;
  min-width:350px;
  margin-bottom: 1rem;margin:2rem 0;padding:1.5rem;background:var(--papier);border:1px solid var(--bordure);border-top:.35rem solid var(--corail)}


.project-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.project-gallery a {
  display: block;
  overflow: hidden;
  background: var(--sable);
}

.project-gallery a:first-child {
  grid-row: 1 / span 2;
}

.project-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 8rem;
  object-fit: cover;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.project-gallery a:first-child img {
  min-height: 17rem;
}

.project-gallery a:hover img,
.project-gallery a:focus-visible img {
  opacity: 0.82;
  transform: scale(1.025);
}

.project-gallery a:focus-visible {
  outline: 0.2rem solid var(--corail);
  outline-offset: 0.2rem;
}

.project-gallery figcaption {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .project-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 7rem;
  }

  .project-gallery a:first-child {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .project-gallery a:nth-child(2),
  .project-gallery a:nth-child(3) {
    grid-row: 2;
  }

  .project-gallery a:first-child img {
    min-height: 13rem;
  }

  .project-gallery img {
    min-height: 6rem;
  }
}

/* Icônes LinkedIn */
.linkedin-icon {
    display: block;
    margin: 0.5rem auto 0;
    width: 24px;
    height: 24px;
}

.linkedin-icon img {
    width: 24px;
    height: 24px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}

.linkedin-icon:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.flex-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.contact-button {
  margin-top: 2rem;
  display: inline-block;
  padding: 0.75rem 1.25rem;
  color: #ffffff;
  background-color: #26343a;
  border: 2px solid #26343a;
  border-radius: 0.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.contact-button:hover {
  color: #26343a;
  background-color: #ffffff;
  border-color: #26343a;
}

.contact-button:focus-visible {
  outline: 3px solid #c96f5b;
  outline-offset: 3px;
}

.contact-button:active {
  transform: translateY(1px);
}