:root{
  --bg:#0b0b0b;        /* fond de page (noir) */
  --paper:#e9eae6;     /* panneau clair */
  --ink:#0b0b0b;       /* encre (noir) pour le titre et l’anneau */
  --text:#151515;      /* texte primaire sur le panneau */
  --muted:#6c6c6c;     /* texte secondaire */
  --link:#111;         /* liens */
  --sheet-w: min(1100px, 92vw);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg);
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  color:var(--text);
}

/* conteneur centré */
.page{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:40px;
}

/* panneau */
.sheet{
  width:var(--sheet-w);
  background:var(--paper);
  border-radius:5px;           
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* header */
.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 26px 10px;
  font-size:13px;
  letter-spacing:.08em;
  flex-wrap:wrap;
  gap:10px 16px;
}

.brand{
  color:var(--text); 
  text-decoration:none; 
  font-weight:700;
}
.brand img{
  height:auto;
  max-height:55px;
  width:auto;
  display:block;
}

/* navigation */
.top-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.top-nav a{
  color:var(--text);
  text-decoration:none;
  margin-left:18px;
}
.top-nav a:first-child{ margin-left:0; }
.top-nav a[aria-current="page"]{ opacity:.55; }

/* corps */
.sheet-body{
  position:relative;
  padding:24px 26px 30px;
  display:grid;
  grid-template-columns: 1fr 320px; /* texte / colonne droite */
  gap:24px;
}

/* titre géant */
.contact-title{
  grid-column: 1 / span 1;
  grid-row: 1;
  margin:10px 0 0;
  font-weight:900;
  line-height:.82;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  font-size: clamp(64px, 14vw, 200px);
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
}
.contact-title .c{ display:inline-block; }
.o-wrap{ position:relative; display:inline-block; margin:0 .04em; }
.o{
  display:inline-block;
  transform: translateY(.01em);
}
.o-ring{
  position:absolute; inset:auto auto 0 50%;
  transform: translate(-50%, 20%) rotate(-8deg);
  width: 1em; height: .8em;
  pointer-events:none;
}
.contact-title .rest{ display:inline-block; }

/* image à droite */
.side-image{
  grid-column: 2 / 3;
  grid-row: 1;
  margin:34px 0 0;
}
.side-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:0;
  outline:1px solid rgba(0,0,0,.12);
}
.side-image figcaption{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
}

/* coordonnées */
.contact-block{
  grid-column: 2 / 3;
  grid-row: 1;
  align-self:end;
  margin:0 0 20px;
  font-size:14px;
}
.contact-block h2{
  margin:18px 0 10px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--muted);
  font-weight:700;
}
.contact-block .label{
  margin:18px 0 6px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted);
}
.contact-block a{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.25);
  word-break:break-word;
}
.contact-block a:hover{
  border-bottom-color: rgba(0,0,0,.6);
}
.socials{ list-style:none; padding:0; margin:6px 0 0; }
.socials li{ margin:4px 0; }
.address{
  margin-top:14px;
  font-style:normal;
  color:#2a2a2a;
}

/* footer */
.sheet-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 26px 18px;
  font-size:12px;
  color:#3a3a3a;
  letter-spacing:.06em;
  border-top:1px solid #dadcd6;
}

@media (max-width:920px){
  .sheet-body{
    grid-template-columns: 1fr;
    gap:16px;
  }

  .contact-title{
    grid-column: 1;
    grid-row: auto; 
    font-size: clamp(42px, 16vw, 120px);
    line-height:.9;
    word-break:break-word;
  }

  .side-image{
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }

  .contact-block{
    grid-column: 1;
    grid-row: auto;
    align-self:start;
    margin-top: 8px;
  }

  .sheet-header, .sheet-body, .sheet-footer{
    padding-left:18px;
    padding-right:18px;
  }

  .page{ padding:24px; }
  .brand img{ max-height:48px; }
  .top-nav a{ margin-left:0; }
}

@media (max-width:560px){
  .page{ padding:18px; }
  .sheet{ border-radius:8px; }
  .sheet-header, .sheet-body, .sheet-footer{
    padding-left:18px;
    padding-right:18px;
  }
  .contact-title{
    font-size: clamp(36px, 18vw, 92px);
    line-height:.92;
  }
  .top-nav a{
    padding:6px 0;
    display:inline-block;
  }
  .sheet-header{ gap:8px 12px; }
}

/* par sécu : toutes les images sans arrondis */
img{ border-radius:0; max-width:100%; height:auto; }





/* ——— Réorg' à la Bhanka, sans changer le HTML ——— */

/* 1) Le panneau garde son look, mais le corps passe en 1 colonne
      pour laisser un grand souffle de blanc */
.sheet-body{
  grid-template-columns: 1fr !important;
  gap: clamp(16px, 3vw, 32px) !important;
}

/* 2) Le titre occupe toute la largeur */
.contact-title{
  grid-column: 1 !important;
  margin-top: clamp(4px, 1vw, 10px) !important;
  font-size: clamp(64px, 14vw, 160px) !important; /* un peu plus “affiche” */
  line-height: .84 !important;
}

/* 3) Bloc d’infos remonté sous le titre, façon “Get in touch” */
.contact-block{
  grid-column: 1 !important;
  align-self: start !important;
  margin: clamp(4px, 1vw, 8px) 0 clamp(10px, 4vw, 28px) !important;
  font-size: 14px;
  max-width: 820px; /* ligne de lecture confortable */
}

/* On masque les petits libellés d’origine pour épurer */
.contact-block .label{ 
  display:none !important; 
}

/* 4) Email très proéminent + soulignement épais façon lien Bhanka */
.contact-block a[href^="mailto"]{
  display:inline-block;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  font-size: clamp(24px, 4.5vw, 52px);
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 3px solid currentColor; /* gros souligné */
  padding-bottom: .08em;
}
.contact-block a[href^="mailto"]:hover{
  opacity:.8;
}

/* 5) Socials : ajout d’un titre “Social:” via ::before + grille 2x3 */
.socials{
  margin-top: clamp(10px, 2vw, 22px) !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 14px 28px;
  list-style: none;
}
.socials::before{
  content: "Social:";
  grid-column: 1 / -1;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 2px 0 2px;
}
.socials li{ margin: 0 !important; }
.socials a{
  display:inline-block;
  text-decoration:none;
  color: var(--link);
  border-bottom: 1px solid rgba(0,0,0,.28);
  padding-bottom: 2px;
}
.socials a:hover{ border-bottom-color: rgba(0,0,0,.6); }

/* 6) CV : on injecte “CV:” automatiquement et on aligne sur une rangée */
.contact-block p:has(a[href*="cv_"]),
.contact-block p:has(a[href*="cv"]) {
  display:inline-block;
  margin: 10px 18px 0 0;
}
.contact-block p:has(a[href*="cv_"])::before,
.contact-block p:has(a[href*="cv"])::before{
  content:"CV:";
  font-size: 12px;
  letter-spacing:.12em;
  color: var(--muted);
  margin-right: 10px;
  display: inline-block;
  transform: translateY(-1px);
}
.contact-block p:has(a[href*="cv_"]) + p:has(a[href*="cv_"])::before,
.contact-block p:has(a[href*="cv"]) + p:has(a[href*="cv"])::before{
  content:""; /* le 2e lien n’a pas le label répété */
  margin-right: 0;
}

/* 7) Un peu plus d’air autour des bords pour accent “carte de visite” */
.sheet{
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.sheet-header, .sheet-body, .sheet-footer{
  padding-left: clamp(18px, 3vw, 32px) !important;
  padding-right: clamp(18px, 3vw, 32px) !important;
}

/* 8) Responsive : pile la grille de réseaux + tailles adaptées */
@media (max-width: 900px){
  .socials{ grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (max-width: 560px){
  .contact-title{ font-size: clamp(40px, 17vw, 90px) !important; }
  .contact-block a[href^="mailto"]{ font-size: clamp(22px, 6.2vw, 36px); }
  .socials{ grid-template-columns: 1fr; gap: 10px 0; }
}

/* sécurité : underline propre même si d’autres styles s’appliquent */
.contact-block a{ text-underline-offset: 2px; }

/* — Corrige la rangée dans la grille pour éviter le chevauchement — */
.sheet-body{
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto;              /* chaque ligne prend sa hauteur */
}

.contact-title{
  grid-row: 1 !important;            /* le titre sur la 1re rangée */
  margin-bottom: clamp(24px, 5vw, 72px) !important;
  line-height: 1;                     /* hauteur propre */
}

.contact-block{
  grid-row: 2 !important;            /* le bloc infos sous le titre */
  align-self: start !important;       /* plus de “end” qui remonte le bloc */
  margin-top: 0 !important;
  position: relative; z-index: 1;     /* au-dessus si qqch déborde */
}
/* — La carte doit être 100% visible sans défilement — */
:root{
  /* padding auto en fonction de la hauteur de l’écran */
  --vp: clamp(16px, 4vh, 40px);
}

/* le cadre blanc est centré et ne dépasse jamais le viewport */
.page{ padding: var(--vp) !important; }
.sheet{
  max-height: calc(100svh - (var(--vp) * 2)) !important;
}

/* titre plus “responsive hauteur” + moins d’espace sous lui */
.contact-title{
  font-size: clamp(48px, min(12vw, 14vh), 140px) !important;
  margin-bottom: clamp(12px, 3vh, 32px) !important;
  line-height: .9 !important;
}

/* email fluide : se réduit si la hauteur est faible + peut revenir à la ligne */
.contact-block a[href^="mailto"]{
  font-size: clamp(18px, min(5.2vw, 6.2vh), 44px) !important;
  word-break: break-word;         /* autorise les retours à la ligne élégants */
  hyphens: auto;
  border-bottom-width: 2px;       /* un peu plus fin pour gagner en place visuelle */
  text-underline-offset: 4px;
}

/* resserrer verticalement le bloc infos */
.contact-block{ margin-bottom: clamp(12px, 3vh, 28px) !important; }
.socials{ margin-top: clamp(6px, 1.8vh, 16px) !important; }

/* petits écrans : on tasse encore légèrement */
@media (max-width: 560px){
  .contact-title{ font-size: clamp(36px, 12.5vh, 92px) !important; }
  .contact-block a[href^="mailto"]{ font-size: clamp(18px, 5.5vh, 34px) !important; }
}

/* — Social: + LinkedIn sur une seule ligne — */
.socials{
  display: flex !important;
  align-items: baseline;
  gap: 10px 18px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0 !important;
  flex-wrap: wrap;                /* passe à la ligne si besoin */
}

.socials::before{
  content: "Social:";
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-right: 8px;
  flex: 0 0 auto;                 /* reste collé à gauche */
}

.socials li{ 
  margin: 0 !important; 
  flex: 0 0 auto;
}

.socials a{
  text-decoration: none;
  color: var(--link);
  border-bottom: 1px solid rgba(0,0,0,.28);
  padding-bottom: 2px;
  white-space: nowrap;            /* évite le retour à la ligne de “LinkedIn” */
}
.socials a:hover{ border-bottom-color: rgba(0,0,0,.6); }

/* optionnel: sur très petit écran, forcer tout sur une ligne jusqu'à 2 items */
@media (max-width: 560px){
  .socials{ gap: 8px 14px; }
}


/* === FORCE CONTACT PLUS GRAND (override garanti) === */
.sheet .sheet-body .contact-title,
.sheet-body > .contact-title {
  font-size: clamp(72px, min(20vw, 22vh), 260px) !important;
  line-height: .86 !important;
  margin-bottom: clamp(12px, 3vh, 32px) !important;
}