/* Yelipix : feuille de style partagée (le bogolan comme système).
   Sources : docs/design-system.md et maquette/html/Accueil.html (bloc <style> dupliqué des maquettes).
   Polices et motifs sont LOCAUX (aucun CDN). Le texte ne se pose jamais sur le tissu : plaque ou carte. */

/* ---------- Polices locales (sous-ensemble latin, SIL OFL 1.1, voir fonts/LICENCES.md) ---------- */
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/BricolageGrotesque.woff2) format('woff2');font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(../fonts/PlusJakartaSans.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

/* ---------- Jetons : les 6 teintures et les neutres dérivés ---------- */
:root{
  --boue:#231710;--coton:#F3ECDD;--jaune:#E0A93B;--ecorce:#B54E15;--roux:#9C5A34;--feuille:#4F6B2C;
  --surface:#FBF7EF;--zebre:#F6EFE2;--filet:#E6D8BF;--bord:#DCCBB0;
  --clair-sur-sombre:#C9B79A;--texte-2:#6E5643;--survol:#8C3A0E;--survol-jaune:#E2B457;
  --police-texte:'Plus Jakarta Sans',system-ui,sans-serif;
  --police-titre:'Bricolage Grotesque',system-ui,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--coton);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--coton);color:var(--boue);font-family:var(--police-texte);font-size:15px;line-height:1.5;overflow-x:hidden}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--ecorce)}
a:hover{color:var(--survol)}
.disp{font-family:var(--police-titre);font-optical-sizing:auto}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.signe{flex-shrink:0}
[hidden]{display:none!important}

/* Focus : anneau jaune 3px + liseré boue en dessous (le jaune seul ne se voit pas sur fond clair, 1,8:1) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--jaune);outline-offset:2px;box-shadow:0 0 0 2px var(--boue)}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 16px;border-radius:10px;background:var(--boue);color:var(--coton);font-weight:800;text-decoration:none}
.skip:focus{top:10px}

/* ---------- Les 4 fonds tissés ---------- */
.cloth{background:linear-gradient(rgba(22,14,9,.38),rgba(22,14,9,.38)),url(../motifs/cloth_dark.svg) repeat;background-color:var(--boue);background-size:auto,300px 300px}
.cloth-big{background:radial-gradient(ellipse 80% 60% at 50% 45%,rgba(22,14,9,.15),rgba(22,14,9,.6)),url(../motifs/cloth_dark.svg) repeat;background-color:var(--boue);background-size:auto,460px 460px}
.cloth-l{background:var(--coton) url(../motifs/cloth_light.svg) repeat;background-size:300px 300px}
.cloth-y{background:var(--jaune) url(../motifs/cloth_yellow.svg) repeat;background-size:300px 300px}
.glow{background:radial-gradient(circle at 50% 46%,rgba(240,190,90,.75),rgba(224,169,59,.28) 36%,rgba(224,169,59,0) 68%)}

/* ---------- Les frises (la hauteur de la bande fixe l'échelle) ---------- */
.b-zig{background:var(--boue) url(../motifs/band_zigzag.svg) repeat-x;background-size:auto 100%}
.b-circ{background:var(--boue) url(../motifs/band_circles.svg) repeat-x;background-size:auto 100%}
.b-croco{background:var(--boue) url(../motifs/band_croco.svg) repeat-x;background-size:auto 100%}
.b-sickle{background:var(--boue) url(../motifs/band_sickle.svg) repeat-x;background-size:auto 100%}
.b-zig-l{background:url(../motifs/band_light_zigzag.svg) repeat-x;background-size:auto 100%}

/* ---------- Boutons (liseré cousu à 6px du bord bas, d'où le padding-bottom) ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:14px;font-family:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.btn-mud{background:var(--boue) url(../motifs/trim_yellow.svg) repeat-x;background-size:32px 6px;background-position:0 calc(100% - 6px);color:var(--coton);padding:0 20px 4px}
.btn-mud:hover{color:#FFFFFF}
.btn-yel{background:var(--jaune) url(../motifs/trim_mud.svg) repeat-x;background-size:32px 6px;background-position:0 calc(100% - 6px);color:var(--boue);padding:0 20px 4px}
.btn-yel:hover{color:var(--boue);background-color:var(--survol-jaune)}
.btn-ok{background:var(--feuille) url(../motifs/trim_yellow.svg) repeat-x;background-size:32px 6px;background-position:0 calc(100% - 6px);color:#FFFFFF;padding:0 20px 4px}
.btn-line{background:var(--surface);border:1.5px solid var(--boue);color:var(--boue)}
.btn-ora{background:var(--surface);border:1.5px solid var(--ecorce);color:var(--ecorce)}
.btn-off,.btn:disabled{background:var(--clair-sur-sombre);color:var(--boue);cursor:not-allowed;opacity:1}

/* ---------- Chips ---------- */
.chip{height:36px;padding:0 13px;border-radius:18px;border:1.5px solid var(--bord);background:var(--surface);color:var(--boue);font-family:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin:0}
.chip.on{border-color:var(--boue);background:var(--boue);color:var(--coton);font-weight:800}
button.chip{cursor:pointer}

/* ---------- Plaque (verre fumé) et ombres ---------- */
.plaque{background:rgba(26,17,11,.62);-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);border:1px solid rgba(224,169,59,.30);box-shadow:0 18px 44px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,240,210,.08);color:var(--coton)}
.lift{box-shadow:0 16px 34px rgba(35,23,16,.28),0 2px 6px rgba(35,23,16,.12)}

/* ---------- Animations ---------- */
.paint *{stroke-dasharray:1;stroke-dashoffset:1;animation:paint 1.3s ease-out forwards}
.loop *{stroke-dasharray:1;stroke-dashoffset:1;animation:paintloop 2.6s ease-in-out infinite;animation-delay:inherit}
.slide{animation:slide 6s linear infinite}
@keyframes paint{to{stroke-dashoffset:0}}
@keyframes paintloop{0%{stroke-dashoffset:1}40%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes slide{to{background-position:-96px 0}}
@media (prefers-reduced-motion:reduce){.paint *,.loop *{animation:none;stroke-dashoffset:0}.slide{animation:none}}

/* =====================================================================
   Page d'accueil publique
   ===================================================================== */
.wrap{width:100%;max-width:1120px;margin:0 auto}
.titre{display:flex;align-items:center;gap:10px;color:var(--ecorce)}
.titre h2{margin:0;font-size:30px;line-height:1.08;font-weight:800;letter-spacing:-.7px;color:var(--boue)}
.texte{margin:0;font-size:14.5px;line-height:1.55;color:var(--texte-2)}

/* En-tête */
.entete{padding:10px 12px}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marque{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:12px;text-decoration:none}
.marque:hover{color:var(--coton)}
.marque span{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--coton)}
.btn-connexion{height:42px;padding:0 15px;background:var(--coton);color:var(--boue);font-size:13px;border-radius:12px}
.btn-connexion:hover{color:var(--boue);background:#FFFFFF}

/* Héros */
.hero{padding:18px 14px 26px;overflow-x:clip}
.hero .wrap{display:flex;flex-direction:column;gap:18px}
.hero-texte{border-radius:10px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px}
.hero-texte h1{margin:0;font-size:40px;line-height:1.02;font-weight:800;letter-spacing:-1.2px}
.hero-texte p{margin:0;font-size:15px;line-height:1.55;color:var(--filet)}
/* Téléphone : texte, éventail, bouton, lien (ordre de la maquette) ; ordinateur : colonne de gauche + éventail */
.hero-gauche,.hero-actions{display:contents}
.hero-texte{order:1}.eventail-fond{order:2}.hero-actions>*:first-child{order:3}.lien-studio{order:4}
.btn-appel{height:60px;font-size:16px}
.lien-studio{align-self:center;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none}
.lien-studio:hover{color:var(--coton)}
.eventail-fond{margin:0 -14px;padding:0 14px}
.eventail{position:relative;width:min(100%,362px);margin:0 auto;aspect-ratio:362/350}
.eventail img{position:absolute;object-fit:cover;border-radius:6px;box-sizing:border-box}
.eventail .g{left:.5%;top:10.8%;width:43.6%;height:78.6%;transform:rotate(-7deg);border:4px solid var(--coton);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.eventail .d{right:.5%;top:10.8%;width:43.6%;height:78.6%;transform:rotate(7deg);border:4px solid var(--coton);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.eventail .c{left:23.2%;top:0;width:53.4%;height:94.3%;border:3px solid var(--jaune);box-shadow:0 0 70px 10px rgba(240,190,90,.55),0 20px 40px rgba(0,0,0,.6)}

/* Une phrase suffit */
.phrase{padding:34px 14px 38px}
.carte{background:var(--surface);border:1.5px solid var(--bord);border-radius:12px;overflow:hidden}
.phrase .carte{padding:24px 20px 26px}
.phrase-grille{display:flex;flex-direction:column;gap:18px}
.phrase-col{display:flex;flex-direction:column;gap:18px}
.bulle{align-self:flex-start;max-width:290px;background:var(--surface);border:1.5px solid var(--bord);padding:11px 13px;border-radius:16px 16px 16px 4px;font-size:14px;line-height:1.45}
.bulle-vocal{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--texte-2)}
.attente{align-self:center;padding:14px;background:var(--surface);border:1.5px solid var(--bord);border-radius:14px}
.attente-corps{width:250px;max-width:100%;display:flex;flex-direction:column;gap:8px;align-items:center}
.attente-rang{width:100%;display:flex;gap:6px}
.attente-rang div{flex:1;aspect-ratio:1;border-radius:8px;background:var(--boue);color:var(--coton);display:flex;align-items:center;justify-content:center}
.attente-corps span{font-size:12.5px;font-weight:700;color:var(--texte-2)}
.resultat{margin:0;align-self:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.resultat img{width:262px;max-width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;box-shadow:0 22px 46px rgba(35,23,16,.32)}
.resultat figcaption{font-size:12.5px;color:var(--texte-2)}

/* Galerie */
.galerie{padding:34px 20px 30px;background:var(--surface)}
.galerie .wrap{max-width:960px;display:flex;flex-direction:column;gap:16px}
.galerie-intro{display:flex;flex-direction:column;gap:10px}
.onglets{display:flex;gap:6px;overflow:hidden;flex-wrap:wrap}
.panneau{display:flex;flex-direction:column;gap:16px}
.sous-titre{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.grille img{width:100%;object-fit:cover;border-radius:10px}
.r916{aspect-ratio:9/16}.r45{aspect-ratio:4/5}.r11{aspect-ratio:1/1}
.grille .large{grid-column:span 2}
.anime{display:flex;gap:12px;align-items:center}
.anime video{flex-shrink:0;width:150px;aspect-ratio:9/16;object-fit:cover;border-radius:6px;box-shadow:0 16px 34px rgba(35,23,16,.28);background:var(--boue)}
.anime-texte{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--texte-2)}
.etiquette-prix{font-size:12.5px;font-weight:800;color:var(--coton);background:var(--boue);padding:5px 10px;border-radius:6px}
.metiers{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:8px 0 0;list-style:none}

/* Votre vrai produit */
.produit{background:var(--boue);color:var(--coton)}
.produit-corps{padding:30px 20px 36px}
.produit-corps .wrap{max-width:960px;display:flex;flex-direction:column;gap:16px}
.produit-titre{color:var(--jaune)}
.produit-titre h2{font-size:29px;color:var(--coton)}
.produit .texte{color:var(--filet)}
.triptyque{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:start;margin:0;padding:0;list-style:none}
.triptyque figure{margin:0;display:flex;flex-direction:column;gap:6px}
.triptyque img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:2px solid var(--jaune)}
.triptyque .depart img{border-color:var(--texte-2)}
.triptyque figcaption{font-size:11.5px;font-weight:700;color:var(--clair-sur-sombre)}

/* Prix */
.prix{padding:26px 14px}
.prix .carte{max-width:600px;margin:0 auto;border:none;border-radius:12px;box-shadow:0 16px 34px rgba(35,23,16,.28)}
.prix-tete{padding:20px 18px 8px;display:flex;flex-direction:column;gap:8px}
.prix-tete .titre h2{font-size:29px}
.prix-tete p{margin:0;font-size:14px;line-height:1.5;color:var(--texte-2)}
.prix-liste{margin:0;padding:0;list-style:none}
.prix-ligne{padding:14px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1.5px dashed var(--bord)}
.prix-ligne b{display:block;font-size:16px;font-weight:800}
.prix-ligne small{display:block;font-size:12.5px;color:var(--texte-2);margin-top:2px}
.prix-ligne .montant{font-size:22px;font-weight:800;white-space:nowrap}
.prix-ligne.fin{border-bottom:1.5px dashed var(--bord)}
.prix-choisi + .prix-ligne{border-top:none}
.prix-choisi{padding:8px}
.prix-choisi .encart{background:var(--boue);color:var(--coton);border-radius:6px;padding:14px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;outline:1.5px dashed var(--jaune);outline-offset:-5px}
.prix-choisi b{font-size:16px;font-weight:800}
.prix-choisi small{display:block;font-size:12.5px;color:var(--filet);margin-top:3px}
.prix-choisi .montant{font-size:22px;font-weight:800;white-space:nowrap;color:var(--jaune)}
.badge-choisi{font-size:11px;font-weight:800;color:var(--boue);background:var(--jaune);padding:2px 8px;border-radius:6px;margin-left:4px;vertical-align:2px;white-space:nowrap}
.prix-option{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.prix-option b{font-size:13.5px;font-weight:700}
.prix-option .montant{font-size:18px;font-weight:800;color:var(--ecorce);white-space:nowrap}
.prix-abo{margin:0;padding:12px 18px 16px;font-size:13px;color:var(--texte-2);background:var(--coton)}

/* Appel final et pied de page */
.pied{padding:22px 14px 18px}
.pied .wrap{max-width:760px;display:flex;flex-direction:column;gap:16px}
.pied-appel{border-radius:10px;padding:22px 18px;display:flex;flex-direction:column;gap:16px}
.pied-appel h2{margin:0;font-size:27px;line-height:1.1;font-weight:800;letter-spacing:-.6px}
.pied-appel .btn{height:58px;font-size:16px}
.pied-infos{border-radius:10px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--clair-sur-sombre)}
.pied-infos .nom{display:flex;align-items:center;gap:8px}
.pied-infos nav{display:flex;gap:14px}
.pied-infos a{color:var(--filet)}
.pied-infos a:hover{color:#FFFFFF}

/* Ordinateur : mêmes sections, plus d'air et deux colonnes là où la maquette est en pile */
@media (min-width:640px){
  .entete{padding:14px 24px}
  .grille.statuts{grid-template-columns:repeat(3,1fr)}
  .grille.reseaux{grid-template-columns:repeat(3,1fr)}
  .grille.reseaux .large{grid-column:auto}
  .triptyque{gap:14px}
  .triptyque figcaption{font-size:13px}
}
@media (min-width:900px){
  .hero{padding:44px 24px 56px}
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}
  .hero-gauche{display:flex;flex-direction:column;gap:22px}
  .hero-actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .hero-texte,.eventail-fond,.hero-actions>*:first-child,.lien-studio{order:0}
  .hero-gauche .btn-appel{width:100%;max-width:420px}
  .lien-studio{align-self:flex-start}
  .hero-texte{padding:34px 34px 30px}
  .hero-texte h1{font-size:52px;letter-spacing:-1.6px}
  .hero-texte p{font-size:17px}
  .eventail-fond{margin:0;padding:0}
  .eventail{width:min(100%,460px)}
  .phrase{padding:56px 24px 60px}
  .phrase .carte{padding:36px 40px 40px}
  .phrase-grille{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
  .titre h2{font-size:36px;letter-spacing:-.9px}
  .texte{font-size:16px}
  .galerie{padding:56px 24px 52px}
  .grille.statuts{grid-template-columns:repeat(6,1fr)}
  .grille.reseaux,.grille.produits{max-width:640px}
  .anime video{width:200px}
  .anime-texte{font-size:15px}
  .produit-corps{padding:56px 24px 60px}
  .produit-corps .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:center}
  .produit-titre{grid-column:1}
  .produit-corps .texte{grid-column:1}
  .produit-corps .triptyque{grid-column:2;grid-row:1/span 3}
  .produit-titre h2{font-size:36px}
  .prix{padding:56px 24px}
  .prix-tete .titre h2{font-size:34px}
  .pied{padding:40px 24px 28px}
  .pied-appel{padding:34px 34px;flex-direction:row;align-items:center;justify-content:space-between}
  .pied-appel h2{font-size:30px;max-width:380px}
  .pied-appel .btn{width:300px;flex-shrink:0}
}