/* ============================================================
   CANARD ART — Site vitrine
   Feuille de style conforme à la charte graphique v1.0
   ============================================================ */

/* ---------- Tokens (copiés de la charte) ---------- */
:root{
  --ca-jaune:        #F2A20C;
  --ca-jaune-vif:    #FFB81C;
  --ca-jaune-fonce:  #D18A05;
  --ca-noir:         #131211;
  --ca-noir-doux:    #211F1D;

  --ca-papier:       #F7F1E3;
  --ca-papier-fonce: #EDE4D0;
  --ca-blanc:        #FFFFFF;
  --ca-gris-trait:   #D8CFBC;
  --ca-gris-texte:   #5C564C;
  --ca-gris-clair:   #B9B3A6;

  --ca-hanko:        #C22F21;
  --ca-bec:          #E88A00;

  --ca-succes:       #2E7D46;
  --ca-erreur:       #C0392B;
  --ca-info:         #2C5F8A;

  --font-display: 'Bangers', cursive;
  --font-brush:   'Permanent Marker', cursive;
  --font-titre:   'Montserrat', sans-serif;
  --font-texte:   'Nunito Sans', sans-serif;

  --fs-hero: clamp(2.8rem, 6vw, 4.5rem);
  --fs-h1:   clamp(2.2rem, 4.5vw, 3rem);
  --fs-h2:   clamp(1.6rem, 3vw, 2.1rem);
  --fs-h3:   1.35rem;
  --fs-h4:   1.1rem;
  --fs-body: 1rem;
  --fs-small:.875rem;
  --fs-tiny: .75rem;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;  --sp-7: 3rem;   --sp-8: 4rem; --sp-9: 6rem;

  --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-pill: 999px;
  --ombre-carte: 0 4px 14px rgba(19,18,17,.10);
  --ombre-forte: 0 10px 30px rgba(19,18,17,.22);
  --ombre-manga: 5px 5px 0 var(--ca-noir);

  --t-rapide: .15s ease;
  --t-normal: .3s cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-texte);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ca-noir);
  background:var(--ca-papier);
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp-5)}

/* ---------- Titres de section ---------- */
.sec-tete{margin-bottom:var(--sp-6)}
.sec-tete .kicker{
  font-family:var(--font-titre);font-weight:800;font-size:var(--fs-tiny);
  text-transform:uppercase;letter-spacing:.2em;color:var(--ca-hanko);
}
.sec-tete h2{
  font-family:var(--font-display);
  font-size:var(--fs-h1);letter-spacing:2px;line-height:1.05;
  text-transform:uppercase;margin:.15em 0 .3em;
}
.sec-tete h2 .surligne{
  background:linear-gradient(transparent 55%, var(--ca-jaune) 55%, var(--ca-jaune) 92%, transparent 92%);
  padding:0 .1em;
}
.sec-tete .sous{color:var(--ca-gris-texte);max-width:62ch}
.sombre .sec-tete .sous{color:var(--ca-gris-clair)}

section{padding:var(--sp-9) 0}
section.sombre{background:var(--ca-noir);color:var(--ca-papier)}
section.alt{background:var(--ca-papier-fonce)}

/* ---------- Boutons ---------- */
.btn{
  font-family:var(--font-titre);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:.85rem;
  padding:.85em 1.9em;border-radius:var(--r-pill);
  border:3px solid var(--ca-noir);cursor:pointer;
  transition:transform var(--t-rapide), box-shadow var(--t-rapide), background var(--t-rapide), color var(--t-rapide);
  text-decoration:none;display:inline-block;color:var(--ca-noir);
  text-align:center;
}
.btn-primaire{background:var(--ca-jaune);box-shadow:var(--ombre-manga)}
.btn-primaire:hover{background:var(--ca-jaune-vif);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ca-noir)}
.btn-primaire:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ca-noir);background:var(--ca-jaune-fonce)}
.sombre .btn-primaire{box-shadow:5px 5px 0 rgba(247,241,227,.25)}
.btn-secondaire{background:transparent}
.btn-secondaire:hover{background:var(--ca-noir);color:var(--ca-jaune)}
.sombre .btn-secondaire{color:var(--ca-papier);border-color:var(--ca-papier)}
.sombre .btn-secondaire:hover{background:var(--ca-papier);color:var(--ca-noir)}
.btn:focus-visible{outline:3px dashed var(--ca-hanko);outline-offset:4px}

/* ---------- Header ---------- */
.entete{
  background:var(--ca-noir);
  position:sticky;top:0;z-index:100;
  border-bottom:4px solid var(--ca-jaune);
}
.entete .barre{
  max-width:1200px;margin:0 auto;padding:var(--sp-3) var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-6);
}
.marque{
  font-family:var(--font-display);color:var(--ca-papier);
  font-size:1.6rem;letter-spacing:2px;text-decoration:none;
  display:flex;align-items:center;gap:var(--sp-3);line-height:1;
}
.marque img{height:46px;width:auto}
.marque .art{color:var(--ca-jaune)}
.logo-rond{
  width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 30%;
  border:2px solid var(--ca-jaune);background:var(--ca-blanc);
}

.nav-liens{display:flex;gap:var(--sp-4);list-style:none;margin-left:auto;align-items:center}
.nav-liens a:not(.btn){
  font-family:var(--font-titre);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--ca-papier);text-decoration:none;
  padding:.4em .2em;border-bottom:3px solid transparent;
  transition:border-color var(--t-rapide),color var(--t-rapide);
}
.nav-liens a:not(.btn):hover,.nav-liens a.actif{color:var(--ca-jaune);border-bottom-color:var(--ca-jaune)}
.nav-liens .btn{padding:.6em 1.4em;font-size:.75rem}

.burger{
  display:none;margin-left:auto;background:none;border:none;cursor:pointer;
  width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center;
}
.burger span{width:26px;height:3px;background:var(--ca-papier);border-radius:2px;transition:transform var(--t-normal),opacity var(--t-normal)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  .nav-liens{
    position:absolute;top:100%;left:0;right:0;
    background:var(--ca-noir);flex-direction:column;align-items:flex-start;
    padding:var(--sp-4) var(--sp-5) var(--sp-6);gap:var(--sp-2);
    border-bottom:4px solid var(--ca-jaune);
    display:none;
  }
  .nav-liens.ouvert{display:flex}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--ca-noir);color:var(--ca-papier);
  position:relative;overflow:hidden;
  padding:var(--sp-8) 0 var(--sp-9);
}
.hero::after{
  content:"アート";
  position:absolute;right:0;top:-.15em;
  font-family:var(--font-titre);font-weight:900;
  font-size:clamp(6rem,16vw,13rem);
  color:rgba(247,241,227,.05);
  writing-mode:vertical-rl;line-height:1;pointer-events:none;
}
.hero .wrap{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--sp-7);align-items:center;position:relative;z-index:1;
}
.hero .badge-hanko{
  display:inline-block;font-family:var(--font-titre);font-weight:700;
  font-size:var(--fs-tiny);letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--ca-hanko);
  padding:.45em 1.1em;border-radius:4px;margin-bottom:var(--sp-4);
}
.hero h1{
  font-family:var(--font-display);
  font-size:var(--fs-hero);line-height:.95;letter-spacing:2px;
  text-transform:uppercase;
}
.hero h1 .j{color:var(--ca-jaune)}
.hero .brush{
  font-family:var(--font-brush);color:var(--ca-jaune);
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  margin:var(--sp-4) 0;transform:rotate(-1.2deg);display:inline-block;
}
.hero p.pitch{color:var(--ca-gris-clair);max-width:55ch;margin-bottom:var(--sp-6)}
.hero .actions{display:flex;gap:var(--sp-4);flex-wrap:wrap}

.hero .visuel{position:relative;display:flex;justify-content:center}
.hero .visuel .sticker{
  width:min(400px,100%);aspect-ratio:1;border-radius:50%;
  background:var(--ca-blanc);overflow:hidden;
  border:5px solid var(--ca-noir);
  box-shadow:0 0 0 6px var(--ca-jaune), 0 18px 40px rgba(0,0,0,.55);
  transform:rotate(-2deg);
  transition:transform var(--t-normal);
}
.hero .visuel .sticker:hover{transform:rotate(0deg) scale(1.02)}
.hero .visuel .sticker img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .visuel{order:-1}
  .hero .visuel .sticker{width:min(260px,70%)}
}

/* ---------- Bandeau piliers ---------- */
.piliers{background:var(--ca-jaune);border-top:4px solid var(--ca-noir);border-bottom:4px solid var(--ca-noir);padding:var(--sp-6) 0}
.piliers .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-5)}
.pilier{display:flex;align-items:center;gap:var(--sp-4)}
.pilier .medaillon{
  width:64px;height:64px;border-radius:50%;flex:none;
  background:var(--ca-noir);border:3px solid var(--ca-blanc);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  box-shadow:0 0 0 3px var(--ca-noir);
}
.pilier b{font-family:var(--font-titre);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;display:block;line-height:1.3}
.pilier span{font-size:var(--fs-tiny);color:rgba(19,18,17,.75)}

/* ---------- L'artiste : bio + fiche personnage ---------- */
.apropos .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-8);align-items:center}
.apropos p{margin-bottom:var(--sp-4);color:var(--ca-gris-texte)}
.apropos p b{color:var(--ca-noir)}
.apropos .devise{
  font-family:var(--font-brush);color:var(--ca-noir);
  font-size:1.15rem;transform:rotate(-1deg);
  padding:var(--sp-3) var(--sp-4);margin:var(--sp-5) 0;
  border-left:6px solid var(--ca-jaune);background:var(--ca-blanc);
  border-radius:0 var(--r-m) var(--r-m) 0;
}
.apropos .devise span{font-family:var(--font-texte);font-size:var(--fs-tiny);color:var(--ca-gris-texte);display:block;margin-top:.3em}

.fiche{
  background:var(--ca-noir);color:var(--ca-papier);
  border:3px solid var(--ca-noir);border-radius:var(--r-l);
  box-shadow:8px 8px 0 var(--ca-jaune);
  transform:rotate(-1.2deg);overflow:hidden;
}
.fiche-tete{
  background:var(--ca-jaune);color:var(--ca-noir);
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-3) var(--sp-5);
  font-family:var(--font-display);letter-spacing:2px;font-size:1.1rem;
}
.fiche-hanko{
  background:var(--ca-hanko);color:#fff;font-family:var(--font-texte);
  font-size:.8rem;padding:.2em .45em;border-radius:3px;transform:rotate(3deg);
}
.fiche-identite{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
}
.fiche-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;
  background:var(--ca-jaune);border:3px solid var(--ca-papier);
  display:flex;align-items:center;justify-content:center;font-size:2rem;
}
.fiche-identite b{font-family:var(--font-display);font-size:1.4rem;letter-spacing:1.5px;display:block;line-height:1.1}
.fiche-identite span{font-size:var(--fs-tiny);color:var(--ca-gris-clair);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.fiche-infos{list-style:none;padding:0 var(--sp-5);margin-bottom:var(--sp-4)}
.fiche-infos li{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:.5em 0;border-bottom:1px dashed rgba(247,241,227,.2);
  font-size:var(--fs-small);
}
.fiche-infos li span{color:var(--ca-gris-clair);text-transform:uppercase;font-size:var(--fs-tiny);letter-spacing:.08em;font-weight:700;flex:none;padding-top:.15em}
.fiche-infos li b{text-align:right}
.stats{padding:0 var(--sp-5) var(--sp-5)}
.stat{display:grid;grid-template-columns:110px 1fr auto;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-2)}
.stat span{font-family:var(--font-titre);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.stat .barre{
  height:14px;border-radius:var(--r-pill);
  background:rgba(247,241,227,.15);border:2px solid rgba(247,241,227,.25);
  overflow:hidden;
}
.stat .barre i{
  display:block;height:100%;width:var(--v,50%);
  background:var(--ca-jaune);border-radius:var(--r-pill);
}
.stat .barre i.max{background:linear-gradient(90deg,var(--ca-jaune),var(--ca-bec),var(--ca-hanko))}
.stat .over{font-family:var(--font-display);color:var(--ca-jaune);font-size:1.1rem}
.chiffres{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-5)}
.chiffre .nb{font-family:var(--font-display);font-size:2.4rem;letter-spacing:1px;color:var(--ca-noir)}
.chiffre .nb .j{color:var(--ca-bec)}
.chiffre .lbl{font-size:var(--fs-tiny);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--ca-gris-texte)}
@media (max-width:900px){.apropos .wrap{grid-template-columns:1fr}}

/* (les styles des cartes produit vivent dans la charte graphique —
   ils reviendront ici le jour où la boutique de matériel ouvrira) */

/* ---------- Portraits : étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-5);counter-reset:etape}
.etape{
  background:var(--ca-noir-doux);border:2px solid rgba(247,241,227,.15);
  border-radius:var(--r-l);padding:var(--sp-6) var(--sp-5) var(--sp-5);
  position:relative;
}
.etape::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;top:-22px;left:var(--sp-5);
  width:44px;height:44px;border-radius:50%;
  background:var(--ca-jaune);color:var(--ca-noir);
  border:3px solid var(--ca-noir);
  font-family:var(--font-display);font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;
}
.etape .emoji{font-size:2rem;margin-bottom:var(--sp-2)}
.etape h3{font-family:var(--font-titre);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4em;color:var(--ca-papier)}
.etape p{font-size:var(--fs-small);color:var(--ca-gris-clair)}
.portraits .offre{
  margin-top:var(--sp-8);
  background:var(--ca-jaune);color:var(--ca-noir);
  border:3px solid var(--ca-papier);border-radius:var(--r-l);
  padding:var(--sp-6);display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
  box-shadow:6px 6px 0 rgba(247,241,227,.25);
}
.portraits .offre .prix{font-family:var(--font-display);font-size:3rem;letter-spacing:1px;line-height:1}
.portraits .offre .desc{flex:1;min-width:240px}
.portraits .offre .desc b{font-family:var(--font-titre);text-transform:uppercase;font-size:.9rem;letter-spacing:.04em}
.portraits .offre .desc p{font-size:var(--fs-small)}

/* ---------- Galerie ---------- */
.galerie-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-5)}
.oeuvre{
  background:var(--ca-blanc);border:3px solid var(--ca-noir);border-radius:var(--r-m);
  overflow:hidden;transition:transform var(--t-normal),box-shadow var(--t-normal);
}
.oeuvre:hover{transform:translateY(-5px) rotate(.6deg);box-shadow:var(--ombre-manga)}
.oeuvre:nth-child(even):hover{transform:translateY(-5px) rotate(-.6deg)}
.oeuvre .planche{
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  font-size:3.6rem;border-bottom:3px solid var(--ca-noir);position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(19,18,17,.08) 1px, transparent 1.6px) 0 0/14px 14px,
    linear-gradient(160deg, var(--ca-blanc) 60%, var(--ca-papier));
}
.oeuvre .planche .hanko{
  position:absolute;bottom:10px;right:10px;
  background:var(--ca-hanko);color:#fff;font-size:.8rem;
  padding:.25em .4em;border-radius:3px;font-weight:700;
}
.oeuvre .legende{padding:var(--sp-3) var(--sp-4)}
.oeuvre .legende b{font-family:var(--font-titre);font-weight:800;font-size:.9rem;display:block}
.oeuvre .legende span{font-size:var(--fs-tiny);color:var(--ca-gris-texte);text-transform:uppercase;letter-spacing:.1em;font-weight:700}

/* ---------- Témoignages ---------- */
.temoignages-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-5)}
.temoin{
  background:var(--ca-blanc);border:3px solid var(--ca-noir);border-radius:var(--r-l);
  padding:var(--sp-5);position:relative;
}
.temoin::before{
  content:"“";font-family:var(--font-display);font-size:4rem;line-height:1;
  color:var(--ca-jaune);position:absolute;top:8px;left:16px;
}
.temoin p{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--ca-gris-texte)}
.temoin .qui{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.temoin .avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--ca-noir);color:var(--ca-jaune);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.2rem;border:2px solid var(--ca-jaune);
}
.temoin .qui b{font-family:var(--font-titre);font-size:.85rem}
.temoin .qui span{display:block;font-size:var(--fs-tiny);color:var(--ca-gris-texte)}
.etoiles{color:var(--ca-bec);letter-spacing:2px}

/* ---------- Contact / newsletter ---------- */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
.champ{margin-bottom:var(--sp-4)}
.champ label{display:block;font-family:var(--font-titre);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4em}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.8em 1em;font-family:var(--font-texte);font-size:1rem;
  border:3px solid var(--ca-noir);border-radius:var(--r-m);background:var(--ca-blanc);
  transition:box-shadow var(--t-rapide);
}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;box-shadow:4px 4px 0 var(--ca-jaune)}
.champ .aide{font-size:var(--fs-tiny);color:var(--ca-gris-texte);margin-top:.35em}
.contact aside .carte-info{
  background:var(--ca-blanc);border:3px solid var(--ca-noir);border-radius:var(--r-l);
  padding:var(--sp-5);margin-bottom:var(--sp-4);box-shadow:var(--ombre-carte);
}
.contact aside .carte-info b{font-family:var(--font-titre);text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;display:block;margin-bottom:.3em}
.contact aside .carte-info p{font-size:var(--fs-small);color:var(--ca-gris-texte)}
.form-ok{
  display:none;background:var(--ca-blanc);border:3px solid var(--ca-noir);
  border-left:10px solid var(--ca-succes);border-radius:var(--r-m);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-small);margin-top:var(--sp-4);
}
.form-ok.visible{display:block}

/* ---------- Footer ---------- */
.pied{
  background:var(--ca-noir);color:var(--ca-gris-clair);
  border-top:6px solid var(--ca-jaune);
  padding:var(--sp-8) 0 var(--sp-6);font-size:var(--fs-small);
}
.pied .colonnes{
  max-width:1200px;margin:0 auto;padding:0 var(--sp-5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-6);
}
.pied h4{font-family:var(--font-titre);color:var(--ca-papier);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;margin-bottom:var(--sp-3)}
.pied a{color:var(--ca-gris-clair);text-decoration:none;display:block;padding:.2em 0}
.pied a:hover{color:var(--ca-jaune)}
.pied .marque-pied{font-family:var(--font-display);font-size:1.5rem;letter-spacing:2px;color:var(--ca-papier);margin-bottom:var(--sp-2)}
.pied .marque-pied .art{color:var(--ca-jaune)}
.pied .legal{
  max-width:1200px;margin:var(--sp-6) auto 0;padding:var(--sp-4) var(--sp-5) 0;
  border-top:1px solid rgba(247,241,227,.15);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-tiny);
}

/* ---------- Apparition au scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Retour en haut ---------- */
.haut{
  position:fixed;bottom:20px;right:20px;z-index:90;
  width:52px;height:52px;border-radius:50%;
  background:var(--ca-jaune);border:3px solid var(--ca-noir);
  font-size:1.4rem;cursor:pointer;box-shadow:var(--ombre-manga);
  opacity:0;pointer-events:none;transition:opacity var(--t-normal);
}
.haut.visible{opacity:1;pointer-events:auto}