/* ============================================================
   B.Walid · site portfolio 2027 · feuille commune · v3.1
   Mesures de référence relevées sur two26.studio à 1440 x 900 (1er nov. 2026).
   Police de titrage : Bricolage Grotesque (OFL 1.1, Mathieu Triay), choisie par Walid
   à la place de MD Nichrome. Tailles calées sur la hauteur de capitale de Nichrome
   (0,698 em contre 0,660 pour Bricolage) : 100 px chez Two26 = 105,8 px ici.
   ============================================================ */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque-VF.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-VF.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/Jost-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --noir:#141313; --encre:#272727; --creme:#F6F1EC; --creme-clair:#FDF8F5; --blanc:#FFFFFF;
  --rouge:#EC1D24; --rouge-fonce:#C32526; --rouge-voile:rgba(236,29,36,.45);
  --gris:#6B6560; --gris-texte:#444444; --gris-repere:#5E5853; --repere:#E2DAD3;
  --titre:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Source Sans 3",system-ui,sans-serif;
  /* marge latérale unique (Two26 : 20 px partout) ; en-tête, accroche et sections sur le même axe */
  /* marge latérale : 20 px au téléphone, 37 à 1280, 40 à 1440 (avis d'expert, 1er nov. 2026) */
  --marge: clamp(20px, 12.57px + 1.905vw, 40px);
  /* échelle d'espacement vertical (linéaire de 390 à 1440, méthode Utopia) ; --sec reste l'écart entre sections */
  --e-1: 8px;
  --e-2: clamp(12px, 10.51px + .381vw, 16px);
  --e-3: clamp(24px, 18.06px + 1.524vw, 40px);
  --e-4: clamp(40px, 31.09px + 2.286vw, 64px);
  --e-5: clamp(64px, 52.11px + 3.048vw, 96px);
  /* tailles fluides 390 → 1440 ; valeurs à 1440 = Two26 × 1,0576 (même hauteur de capitale) */
  --h1: clamp(54px, 23.77px + 7.752vw, 135.4px);
  --h2: clamp(52px, 32.02px + 5.124vw, 105.8px);
  --h2-lh: clamp(48px, 29.8px + 4.667vw, 97px);
  --about: clamp(38px, 14.41px + 6.048vw, 101.5px);
  --about-lh: clamp(42px, 18.97px + 5.905vw, 104px);
  --relance: clamp(32px, 12.33px + 5.043vw, 84.95px);
  --relance-lh: clamp(34px, 13.94px + 5.143vw, 88px);
  --proc: clamp(56px, 38.17px + 4.571vw, 104px);
  --proc-lh: clamp(58px, 40.91px + 4.381vw, 104px);
  --etape: clamp(26px, 23.77px + 0.571vw, 32px);
  --etape-lh: clamp(32px, 28.43px + 0.914vw, 41.6px);
  --h-moyen: clamp(34px, 25.1px + 2.283vw, 58px);
  --corps: clamp(18px, 15.77px + .571vw, 24px);
  --corps-lh: clamp(26px, 24.51px + .381vw, 30px);
  --gal: clamp(280px, 198.29px + 20.952vw, 500px);
  /* écart entre 2 sections = 10 bases, comme two26.studio (feuille de style relevée le 1er nov. 2026) :
     base = largeur de l'écran / 90 entre 992 et 1920 px (16 px à 1440), autres paliers plus bas ; 5 bases sous 480 px */
  --base: calc(clamp(992px, 100vw, 1920px) / 90);
  --sec: calc(var(--base) * 10);
  /* pied : Two26 dimensionne tout en em d'une base = largeur / 90 (16 px à 1440) ; titre 3,75 em × 1,0576, textes 1,125 em */
  --pied-titre: clamp(42px, 4.407vw, 84.6px);
  --pied-titre-lh: 1.05;
  --pied-txt: 18px;
}
@media (min-width:992px){ :root{--pied-txt: clamp(16px, 1.25vw, 24px)} }
/* paliers de la base de Two26 : 834 / 550 / 390 px de largeur idéale pour 16 px */
@media (max-width:991px){ :root{--base: calc(clamp(768px, 100vw, 991px) / 52.125)} }
@media (max-width:767px){ :root{--base: calc(clamp(480px, 100vw, 767px) / 34.375)} }
@media (max-width:479px){ :root{--base: calc(clamp(320px, 100vw, 479px) / 24.375); --sec: calc(var(--base) * 5)} }
*,*::before,*::after{box-sizing:border-box}
/* Bricolage Grotesque : un seul dessin (optique 96) à toutes les tailles, celui du paragraphe À propos.
   Sans effet sur Source Sans 3 et Jost, qui n'ont pas cet axe. */
html{-webkit-text-size-adjust:100%;font-variation-settings:"opsz" 96}
body{margin:0;background:var(--creme);color:var(--noir);font-family:var(--texte);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,h2,h3{margin:0;font-weight:inherit}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ancres : le titre visé arrive sous l'en-tête, pas dessous */
#projets,#qui-je-suis,#services,#processus{scroll-margin-top:88px}
/* focus visible partout : en-tête qui revient, cartes (le masque rognait l'anneau), crème sur le rouge du pied */
.entete.cache:focus-within{transform:none}
.carte a:focus-visible{outline:none}
.carte:has(a:focus-visible){outline:3px solid var(--noir);outline-offset:6px;border-radius:40px}
.pied :focus-visible,.entete.sur-pied :focus-visible{outline-color:var(--creme-clair)}
.evitement:focus{position:fixed;left:16px;top:16px;z-index:200;width:auto;height:auto;clip:auto;padding:10px 16px;border-radius:100px;background:var(--noir);color:var(--creme);font:500 14px/20px var(--texte)}
.etiquette{font:500 18px/18px var(--texte);text-transform:uppercase;letter-spacing:.01em}
/* titrage unique, sur le rendu du paragraphe À propos : Bricolage 600, largeur 80, bas de casse */
.titre-section{font:600 var(--h2)/var(--h2-lh) var(--titre);font-stretch:80%;letter-spacing:-.01em}

/* ---------- En-tête classique : logo à gauche (aligné sur l'accroche), liens à droite ---------- */
.entete{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;padding:0 var(--marge);color:var(--creme);transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .35s,color .35s,height .35s}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:0;transition:opacity .35s}
.entete.plein{height:72px;background:rgba(246,241,236,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--noir)}
.entete.plein::after{opacity:.08}
.entete.cache{transform:translateY(-100%)}
.entete.sur-pied{background:rgba(195,37,38,.9);color:var(--creme-clair)}
.entete.sur-pied .logo img{filter:brightness(0) invert(.97)}
.logo{display:flex;align-items:center;gap:12px;font:600 24px/1 "Jost",sans-serif;font-feature-settings:"ss01";letter-spacing:.2px;color:inherit}
.logo img{width:40px;height:40px}
.logo b{color:var(--rouge);font-weight:600}
.entete.sur-pied .logo b{color:var(--noir)}
.entete.sur-pied .logo img{filter:brightness(0) invert(1)}
.menu{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0}
.menu a:not(.contact){position:relative;font:500 16px/24px var(--texte);letter-spacing:.01em;padding:6px 0}
.menu a:not(.contact)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--rouge);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.menu a:not(.contact):hover::after,.menu a:not(.contact):focus-visible::after,.menu a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.contact{display:inline-flex;align-items:center;gap:10px;height:40px;padding:4px 4px 4px 20px;border-radius:100px;background:var(--creme-clair);color:var(--noir);font:600 15px/1 var(--texte)}
.contact .rond{width:32px;height:32px;border-radius:50%;background:var(--rouge);color:var(--creme-clair);display:grid;place-items:center;transition:transform .35s}
.contact:hover .rond{transform:rotate(45deg)}
.entete.plein .contact{background:var(--noir);color:var(--creme-clair)}
.entete.sur-pied .contact{background:var(--creme-clair);color:var(--noir)}
.fleche-svg{width:10px;height:10px;display:block}
.menu__bouton{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--creme-clair);cursor:pointer;position:relative}
.menu__bouton span{position:absolute;left:13px;width:18px;height:1.5px;background:var(--noir);transition:transform .25s}
.menu__bouton span:first-child{top:17.5px}.menu__bouton span:last-child{top:25px}
.menu__bouton[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu__bouton[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.tiroir{display:none}

/* ---------- Bouton noir à flèche (Two26 : 12 px, pastille 30 px), attraction magnétique au survol ---------- */
.bouton-noir,.bouton-appel{display:inline-flex;align-items:center;gap:0;background:var(--noir);color:var(--creme-clair);padding:3px 3px 3px 20px;border-radius:100px;font:400 12px/20px var(--texte);will-change:transform}
.bouton-noir .txt,.bouton-appel .txt{padding-right:6px}
.bouton-noir .rond,.bouton-appel .rond{width:30px;height:30px;border-radius:50%;background:var(--rouge);color:var(--creme-clair);display:grid;place-items:center;transition:transform .35s}
.bouton-noir:hover .rond,.bouton-appel:hover .rond{transform:rotate(-25deg)}
.bouton-appel{height:36px}

/* ---------- Carte projet (grille 3 × 453, écart 32, image 613, détail 75) ---------- */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;margin:0;padding:0}
.carte__masque{position:relative;overflow:hidden;border-radius:36px;perspective:1200px}
.carte a{display:block;transform-origin:50% 50%;will-change:transform}
.carte__media{position:relative;aspect-ratio:453/613;border-radius:16px;overflow:hidden;background:#ddd}
.carte__media > img{width:100%;height:100%;object-fit:cover}
.carte__media svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.carte__detail{display:flex;align-items:center;gap:16px;padding:13.5px 16px 13.5px 0}
.carte__pastille{flex:none;width:48px;height:48px;border-radius:300px;background:var(--noir);color:var(--creme);display:grid;place-items:center;font:640 24px/1 var(--titre);font-stretch:80%}
.carte__texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:10.4px;text-transform:uppercase}
.carte__nom{font:620 24px/19.2px var(--titre);font-stretch:80%}
.carte__cat{font:500 14px/14px var(--texte);color:var(--rouge-fonce)}
.carte__fleche{flex:none;width:32px;height:32px;border-radius:100px;background:var(--rouge);color:var(--creme-clair);display:grid;place-items:center}
.carte__fleche .fleche-svg{width:13px;height:13px;transform-origin:center}

/* ---------- Pied de page (structure Two26, relevée le 1er nov. 2026 : 1440 x 900, marge 20) ---------- */
.pied{position:relative;min-height:100vh;min-height:100svh;background:var(--rouge-fonce);color:var(--creme-clair);overflow:hidden}
.pied__fond{position:absolute;inset:0;pointer-events:none}
/* opacité portée par le SVG entier : les croisements de boucles ne font plus de taches plus claires */
.pied__texture{position:absolute;inset:0;width:100%;height:100%}
.pied__texture path{fill:none;stroke:#fff;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
.pied__fil{stroke-opacity:.06}
.pied__flux{stroke-opacity:.11}
/* le voile atteint le rouge plein avant le logotype, qui se détache sur un fond uni */
.pied__voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(195,37,38,0) 0%,rgba(195,37,38,0) 40%,var(--rouge-fonce) 66%)}
.pied__cadre{position:relative;min-height:inherit;display:flex;flex-direction:column;justify-content:space-between;padding:var(--e-3) var(--marge) 10px}
.pied__haut{display:flex;justify-content:space-between;gap:40px}
.pied__gauche{display:flex;flex-direction:column;gap:16px;min-width:263px;flex:none}
.pied__titre .ligne{white-space:nowrap}
.pied__titre{font:600 var(--pied-titre)/var(--pied-titre-lh) var(--titre);font-stretch:80%;letter-spacing:-.01em}
.pied__titre .masque{display:block;overflow:visible;clip-path:inset(-.25em -.2em -.25em -.2em)}
.pied__titre .ligne{display:block;transform:translateY(1.35em);opacity:0}
.pied__bloc{display:flex;flex-direction:column;gap:4px}
.pied__bloc--courriel{padding-top:16px;gap:0}
/* alignements : le bloc courriel (2 lignes de 28 px) se cale sur le bloc "Disponible en stage" de la colonne de droite ;
   le haut des capitales du titre s'aligne sur le haut de "Menu principal" et d'"Instagram" */
.pied__bloc--courriel .pied__entete{line-height:1.4;margin-bottom:0}
.pied__titre{margin-top:-.16em}
.pied__reseaux{margin-top:calc(var(--pied-txt) * -.3)}
/* intitulés : pleine opacité (contraste AA sur le rouge), distingués des liens par une graisse plus légère */
.pied__entete{font:500 var(--pied-txt)/1 var(--texte);margin-bottom:.65em;opacity:.88}   /* Two26 : 0,6 ; 0,88 garde un contraste AA sur le rouge */
.pied__lien--a-venir{cursor:default}
.pied__lien{display:inline-flex;align-items:center;gap:12px;font:500 var(--pied-txt)/1.4 var(--texte);width:max-content}
.pied__lien .car{display:inline-block}
.pied__lien .fleche-svg{width:8px;height:8px}
.pied__droite{display:flex;flex-direction:column;justify-content:space-between;gap:50px;width:433px;flex:none}
.pied__droite-haut{display:flex;justify-content:space-between}
.pied__menu{display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.pied__menu .pied__entete{margin-bottom:0}
.pied__reseaux{display:flex;flex-direction:column;gap:16px}
.pied__droite-bas{display:flex;justify-content:space-between;align-items:flex-end;font:400 var(--pied-txt)/1.4 var(--texte)}
/* stage : même construction que le courriel (étiquette, puis valeur en graisse normale), avec un point de disponibilité */
.pied__stage .pied__entete{margin-bottom:0;line-height:1.4}
.pied__statut{display:flex;align-items:center;gap:.55em}
.pied__point{position:relative;flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--creme-clair)}
.pied__point::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pouls 2.2s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes pouls{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
.pied__adresse{text-align:right}
/* seul le logotype s'étire (écrasé à 15 %, ancré en bas) ; la ligne de droits reste nette et suit le haut visible du logotype */
.pied__droits p{margin:0}
.pied__legal{display:flex;gap:20px}
.pied__legal a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s cubic-bezier(.22,1,.36,1)}
.pied__legal a:hover,.pied__legal a:focus-visible{background-size:100% 1px}
/* ligne de droits tout en bas, sous un filet fin pleine largeur (dans la marge) */
.pied__droits{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:var(--e-3);padding-top:10px;border-top:1px solid rgba(253,248,245,.5);font:500 max(12px, calc(var(--pied-txt) * 2 / 3))/1.6 var(--texte)}
.pied__logo{display:block;width:100%;height:auto;margin-top:0;overflow:visible;transform-origin:50% 100%;transform:scaleY(.15);will-change:transform}
.pied__logo path{fill:var(--creme-clair)}
/* bouton d'appel principal du pied : plus grand que les autres boutons */
.pied .bouton-appel{align-self:flex-start;width:max-content;height:58px;padding:5px 5px 5px 26px;gap:14px;font:600 19px/1 var(--texte);background:var(--noir);color:var(--creme-clair)}
.pied .bouton-appel .txt{padding-right:0}
.pied .bouton-appel .rond{width:48px;height:48px}
.pied .bouton-appel .rond .fleche-svg{width:16px;height:16px}
.pied .bouton-appel .rond{background:var(--rouge)}
/* survol du bouton d'appel (principe de Two26) : un disque crème part de la pastille et remplit le bouton, le texte passe au noir */
.pied .bouton-appel{position:relative;isolation:isolate;overflow:hidden}
.pied .bouton-appel::before{content:"";position:absolute;z-index:-1;right:5px;top:5px;width:48px;height:48px;border-radius:50%;background:var(--creme-clair);transform:scale(0);transition:transform .65s cubic-bezier(.22,1,.36,1)}
.pied .bouton-appel .txt{transition:color .35s}
.pied .bouton-appel .rond{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pied .bouton-appel:focus-visible::before{transform:scale(7)}
.pied .bouton-appel:focus-visible .txt{color:var(--noir)}
@media (hover:hover){
  .pied .bouton-appel:hover::before{transform:scale(7)}
  .pied .bouton-appel:hover .txt{color:var(--noir)}
  .pied .bouton-appel:hover .rond{transform:rotate(45deg)}
}

/* ---------- Curseur (ordinateur seulement) ---------- */
.curseur{display:none}
@media (hover:hover) and (pointer:fine){
  .curseur{display:grid;place-items:center;position:fixed;left:0;top:0;z-index:100;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--rouge);pointer-events:none;transition:width .25s,height .25s,margin .25s,background .25s,opacity .25s;opacity:0}
  .curseur span{font:600 13px/1.2 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:var(--creme);opacity:0;transition:opacity .2s;white-space:nowrap}
  .curseur.actif{opacity:1}
  .curseur.projet{width:96px;height:96px;margin:-48px 0 0 -48px}
  .curseur.glisser{width:80px;height:80px;margin:-40px 0 0 -40px}
  .curseur.projet span,.curseur.glisser span{opacity:1}
  .curseur.clair{background:var(--creme)}
  .curseur.texte,.curseur.cache{opacity:0}
}

@media (max-width:1100px){
  .grille{grid-template-columns:repeat(2,1fr);gap:24px}
  .menu{gap:24px}
  .pied__droite{width:auto}
  .pied__droite-haut{gap:80px;justify-content:flex-start}
}
@media (max-width:767px){
  .entete{height:68px;padding:0 var(--marge)}
  .entete.plein{height:60px}
  .logo{font-size:20px}
  .logo img{width:28px;height:28px}
  .menu{display:none}
  .menu__bouton{display:block}
  .tiroir{display:flex;position:fixed;inset:0;z-index:39;flex-direction:column;justify-content:center;gap:22px;padding:0 24px;background:var(--noir);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .tiroir a{font:600 52px/1.05 var(--titre);font-stretch:80%;letter-spacing:-.01em;color:var(--creme)}
  .tiroir.ouvert{opacity:1;visibility:visible}
  .grille{grid-template-columns:1fr;gap:24px}
  .carte__media{aspect-ratio:374/470}
  .carte__nom{line-height:22px}
  .pied__haut{flex-direction:column;gap:48px}
  .pied__gauche{width:auto}
  .pied__droite{gap:40px}
  .pied__droite-haut{gap:56px}
  .pied__droite-bas{gap:24px}
  .pied__droits{flex-wrap:wrap;gap:2px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .pied__titre .ligne{transform:none;opacity:1}
  .pied__logo{transform:none!important}
}