/* Kanopi - feuille unique. Charte V3 du 9 septembre 2026.
   Valeurs reprises de CHARTE.md : couleurs par role, formules fluides fournies,
   etats du chapitre 5. Aucune valeur de couleur en dur hors de :root. */

/* Fontes auto-hebergees, sous-ensemble latin. Aucune requete tierce.
   Karla est variable : un seul fichier couvre 400 a 600. */
@font-face{
  font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/tajawal-400.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/karla-var.woff2") format("woff2");
}

:root{
  --paper:#F7F5F2;
  --paper-deep:#EFEBE6;
  --paper-soft:#D8D0C9;
  --plum:#2E0B1B;
  --ink:#191614;
  --ink-soft:#5F574F;
  --rule:#DCD6CE;
  --accent:#B31450;
  --accent-deep:#8E0F3F;

  --font-titre:"Tajawal",system-ui,sans-serif;
  --font-texte:"Karla",system-ui,-apple-system,sans-serif;

  /* Echelle typographique. Bornes 375 et 1440, interpolation continue. */
  --t-h1:clamp(38.31px,28.70px + 2.56vw,65.6px);
  --t-h2:clamp(30.43px,25.37px + 1.35vw,44.8px);
  --t-h3:clamp(19.03px,17.84px + 0.32vw,22.4px);
  --t-corps:clamp(16.11px,15.59px + 0.14vw,17.6px);
  --t-petit:14.4px;
  --t-nav:15.5px;

  /* Espacements */
  --contenu:min(1120px,88.5vw);
  --bande:clamp(50.48px,33.6px + 4.5vw,98.4px);
  --entete:clamp(68.59px,63.72px + 1.3vw,82.42px);
  --colonnes:clamp(24px,12px + 3vw,56px);
  --titre-contenu:clamp(24px,18px + 1.5vw,40px);
  --rang:clamp(32px,14px + 4.6vw,80px);
  --entre-sections:clamp(32px,12px + 5.3vw,88px);

  --transition:120ms linear;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:7rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-texte);font-size:var(--t-corps);line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Liens de corps de texte : souligne framboise, distinguable sans la couleur. */
a{
  color:inherit;text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1px;text-underline-offset:4px;
  transition:color var(--transition);
}
a:hover{color:var(--accent)}

h1,h2,h3{font-family:var(--font-titre);font-weight:400;margin:0}
h1{font-size:var(--t-h1);line-height:1.15;letter-spacing:-.02em;max-width:15ch}
h2{font-size:var(--t-h2);line-height:1.15;max-width:18ch}
h3{font-size:var(--t-h3);line-height:1.3}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}

.wrap{width:var(--contenu);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:.6rem 1rem;background:var(--ink);color:var(--paper)}

/* ---------------------------------------------------------------- En-tete */
/* Collant sur toutes les tailles. Fond opaque obligatoire : le contenu passe
   dessous. Le panneau hors-ecran est un enfant du header, qui cree son propre
   contexte d'empilement : logo et bouton remontent A L'INTERIEUR de ce
   contexte, jamais en montant le z-index du panneau. */
.masthead{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--entete);gap:24px;
}
.masthead__logo{position:relative;z-index:20;display:block;text-decoration:none;color:var(--ink)}
.masthead__logo svg{width:106.35px;height:auto;display:block}

.nav{display:flex;align-items:center;gap:36px}
.nav a{
  font-size:var(--t-nav);text-decoration:none;
  padding-bottom:4px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
/* Le lien de contact : cadre framboise, aplat au survol. */
.nav .nav__contact{
  color:var(--accent);font-weight:600;
  padding:10px 20px;border:1px solid var(--accent);
  transition:background var(--transition),color var(--transition);
}
.nav .nav__contact:hover{background:var(--accent);color:var(--paper)}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:0;padding:0;cursor:pointer;
  position:relative;z-index:20;color:var(--ink);
}
.nav-toggle__barres,
.nav-toggle__barres::before,
.nav-toggle__barres::after{
  display:block;width:26px;height:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle__barres::before,.nav-toggle__barres::after{content:"";position:absolute}
.nav-toggle__barres::before{transform:translateY(-7px)}
.nav-toggle__barres::after{transform:translateY(7px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__barres{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__barres::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__barres::after{transform:rotate(-45deg)}

/* Sous 48em : panneau plein ecran, fond papier. Au-dela : barre en ligne. */
@media (max-width:47.99em){
  .nav{
    position:fixed;inset:0;z-index:10;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:clamp(1.5rem,5vw,2.5rem);
    padding:6vw;
    background:linear-gradient(112deg,var(--plum) 0%,var(--accent-deep) 100%);
    color:var(--paper);
    transform:translateX(100%);visibility:hidden;
    transition:transform .25s ease,visibility .25s;
    overflow-y:auto;
  }
  .nav[data-ouvert="true"]{transform:none;visibility:visible}
  .nav a{font-family:var(--font-titre);font-size:var(--t-h3);border-bottom:0;padding-bottom:0;color:var(--paper)}
  .nav a:hover{color:var(--paper);text-decoration:underline;text-decoration-color:var(--paper);text-decoration-thickness:1px;text-underline-offset:6px}
  .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--paper);text-underline-offset:6px}
  .nav .nav__contact{align-self:flex-start;font-family:var(--font-texte);font-size:var(--t-nav);padding:12px 22px;border:1px solid var(--paper);color:var(--paper);text-decoration:none}
  .nav .nav__contact:hover{background:var(--paper);color:var(--accent)}
  /* Logo et croix restent au-dessus du panneau : ils passent en papier quand il est ouvert. */
  html[data-menu="ouvert"] .masthead__logo,html[data-menu="ouvert"] .nav-toggle{color:var(--paper)}
  html[data-menu="ouvert"] .masthead{background:transparent;border-bottom-color:transparent}
}
@media (min-width:48em){ .nav-toggle{display:none} }
html[data-menu="ouvert"]{overflow:hidden}

/* ----------------------------------------------------------------- Bandes */
.band{padding-block:var(--bande)}
.band--deep{background:var(--paper-deep)}
.band--dark{background:var(--ink);color:var(--paper)}
.band--dark p{color:var(--paper-soft)}

/* Bandeau de tete : degrade prune vers framboise foncee, motif d'apostrophe
   deborde en haut a droite. Le motif est purement decoratif. */
.hero{position:relative;overflow:hidden;background:linear-gradient(112deg,var(--plum) 0%,var(--accent-deep) 100%)}
.hero__motif{position:absolute;right:70px;top:-150px;width:467px;height:880px;opacity:.13;color:#fff;pointer-events:none}
.hero__contenu{position:relative;padding-block:var(--bande);display:flex;flex-direction:column;gap:32px}
.hero h1{color:var(--paper)}
.hero__chapeau{font-size:var(--t-h3);line-height:1.55;color:var(--paper-soft);max-width:46ch;margin:0}

/* Marqueur K en tete de chaque H2, sur la meme ligne que le debut du titre.
   Decision de Guillaume du 9 septembre : jamais de retour a la ligne apres le K,
   ni sur bureau ni sur mobile.
   Alignement refait le 21 septembre 2026. L'ancien calcul centrait un K de 32 px
   dans l'interligne : mesure au navigateur, il descendait 10,5 px sous la ligne de
   base et faisait 29 % de plus que les capitales. Desormais le K s'assoit sur la
   ligne de base du titre (align-items:baseline, la ligne de base d'un SVG etant
   son bord bas) et sa hauteur vaut celle des capitales de Tajawal, 0,633 em,
   mesuree au canvas. Le viewBox fait 600x800, d'ou la largeur a 0,75 de la hauteur. */
.titre{display:flex;flex-direction:row;align-items:baseline;gap:14px}
.titre__marque{flex:0 0 auto;display:block;height:calc(var(--t-h2) * .633);width:calc(var(--t-h2) * .475)}
.band--dark .titre__marque{color:var(--paper)}

/* Deux colonnes de texte */
.duo{display:grid;gap:var(--colonnes)}
@media (min-width:56em){.duo{grid-template-columns:1fr 1fr}}
.duo p{max-width:none}

.section{display:flex;flex-direction:column;gap:var(--titre-contenu)}
.sections{display:flex;flex-direction:column;gap:var(--entre-sections)}
.section + .section{border-top:1px solid var(--rule);padding-top:var(--entre-sections)}

/* Etiquette de groupe, en capitales espacees */
.etiquette{
  font-size:var(--t-petit);line-height:1.7;color:var(--ink-soft);
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin:0;
}

/* ----------------------------------------------------------- Realisations */
/* Le ratio vient de la grille, jamais d'un recadrage des fichiers : plusieurs
   captures sont des pages en portrait, cadrees par le haut. */
.shots{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,16px + 1.2vw,32px) 40px}
@media (min-width:46em){.shots{grid-template-columns:repeat(2,1fr)}}
.shots li{display:flex;flex-direction:column;gap:14px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:14px}
.shots img,.works img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
}
.shots figcaption,.works p{font-size:var(--t-petit);line-height:1.7;color:var(--ink-soft)}
.shots figcaption{max-width:62ch}

.works{display:grid;gap:32px 40px}
@media (min-width:46em){.works{grid-template-columns:repeat(2,1fr)}}
.work{display:flex;flex-direction:column;gap:14px}
.work figure{margin:0}
.work h3{margin-top:6px}

/* Missions sans construction de site : pas de capture, logos desatures.
   Le cartouche blanc des fichiers se fond dans le papier par multiply. */
.logos{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:24px 56px;
}
.logos img{
  height:clamp(3rem,2.2rem + 2.6vw,4.6rem);width:auto;
  filter:grayscale(1);opacity:.72;mix-blend-mode:multiply;
}
.logos__nom{font-size:var(--t-petit);color:var(--ink-soft)}

/* Liste a puce K, reservee aux enumerations courtes */
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.liste li{display:flex;gap:14px;align-items:flex-start}
.liste svg{flex:0 0 auto;width:12px;height:16px;margin-top:.45em}

/* ---------------------------------------------------------------- Contact */
.contact{position:relative;overflow:hidden}
.contact__filigrane{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1425px;height:auto;opacity:.06;color:#fff;pointer-events:none;
}
.contact__contenu{position:relative;display:flex;flex-direction:column;gap:32px}
.contact h2{color:var(--paper);max-width:14ch}
.contact p{max-width:52ch}
.contact__ecrire{
  font:inherit;font-family:var(--font-texte);font-weight:600;font-size:17.6px;line-height:1;
  display:inline-block;padding:18px 34px;border:0;border-radius:0;
  background:var(--accent);color:var(--paper);cursor:pointer;
  transition:background var(--transition);
}
.contact__ecrire:hover{background:var(--accent-deep)}
.contact__repli{margin:0;font-size:var(--t-petit);color:var(--paper-soft)}
.contact__repli a{color:var(--paper)}
/* Sans JavaScript, l'adresse est reconstituee par la feuille de styles :
   les moissonneurs qui ne lisent que le HTML ne la voient pas. */
.contact__nojs::after{content:"guillaume" "\0040" "kanopi.eu"}
.contact__reveal--inline{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent);border-bottom:1px solid currentColor;
}
.contact__detail{font-size:var(--t-petit);color:var(--paper-soft);margin:0}

/* ------------------------------------------------------------------- Pied */
.colophon{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  padding-block:32px;font-size:var(--t-petit);color:var(--ink-soft);
}
.colophon p{margin:0;max-width:none}


/* Pile de sections : H2 a gauche sur 380 px, contenu a droite. Un filet
   entre deux rangs. Sous 56em, tout passe en une colonne. */
.pile{display:flex;flex-direction:column;gap:var(--rang)}
.pile__rang{display:grid;gap:24px var(--rang)}
.pile__rang + .pile__rang{border-top:1px solid var(--rule);padding-top:var(--rang)}
@media (min-width:56em){.pile__rang{grid-template-columns:380px 1fr}}
/* .pile__rang .titre forcait align-items:flex-start pour compenser l'ancien
   centrage du marqueur. Devenu nuisible depuis l'assise sur la ligne de base. */
.pile__corps{display:flex;flex-direction:column;gap:24px}
.pile__corps p{max-width:none;margin:0}
.pile__chapeau{font-size:var(--t-h3);line-height:1.55;max-width:44ch;margin:0}

/* Trois besoins en colonnes, chacun sous un filet */
.trois{display:grid;gap:14px 40px}
@media (min-width:52em){.trois{grid-template-columns:repeat(3,1fr)}}
/* Colonne en flux vertical pour que le prix puisse etre pousse en bas :
   les trois prix s'alignent alors sur une meme ligne, malgre des textes
   de longueurs tres inegales. */
.trois > div{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule);padding-top:14px}
.trois p{max-width:none;margin:0}
/* Selecteur double : .trois p{margin:0} est plus specifique qu'une simple
   classe et ecrasait sinon le margin-top:auto qui pousse le prix en bas. */
.trois p.trois__prix{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--font-titre);font-size:var(--t-h3);color:var(--ink);
}

/* Photographie posee a sa taille d'origine, jamais agrandie : la regle img
   generale (max-width:100%) suffit, elle ne fait que la reduire en mobile. */
.photo{margin:0}

/* --------------------------------------------------------------- Divers */
/* Largeurs de titre reprises de la maquette, page par page */
.l16{max-width:16ch}.l20{max-width:20ch}.l22{max-width:22ch}.l50{max-width:50ch}
.mesure{max-width:62ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}