/* ==========================================================================
   110graf — template « Whimsical » v3
   Direction : chaleur + malice (illustration jeunesse d'abord), à la manière
   des studios illustration-friendly — fond sobre pour laisser l'œuvre briller,
   personnalité par la couleur, les stickers et la typographie rondelette.
   Palette extraite des illustrations de Sandrine (montage des personnages) :
   lune moutarde, maison sarcelle, robe framboise, chats orangés.
   ========================================================================== */

:root{
  --paper:#fbf6ea;           /* papier crème — l'œuvre d'abord */
  --paper-deep:#f3ebd8;
  --card:#fffdf6;
  --ink:#2a2118;
  --ink-soft:#6d6152;
  --line:#e6dcc5;
  --sun:#e9b525;             /* la lune du montage */
  --teal:#2f8b8f;            /* la maison */
  --berry:#b23a63;           /* la robe de Mamie */
  --tang:#df7230;            /* les chats */
  --leaf:#7c9f00;            /* le vert historique 110graf */
  --shadow-print:0 1px 2px rgba(46,38,24,.08), 0 14px 34px -14px rgba(46,38,24,.28);
  --display:"Baloo 2","Fraunces","Iowan Old Style",Georgia,serif;
  --ui:"Outfit","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --maxw:1180px;

  /* LA fleur du thème 110graf d'origine (silhouette « tampon » à 6 pétales,
     reprise de header-object.png / button.png du template Joomla), recolorée
     dans la palette du site. Toujours affichée ENTIÈRE. */
  --tf-o:url("../img/tf_orange.png");     /* orange   */
  --tf-s:url("../img/tf_sun.png");        /* moutarde */
  --tf-b:url("../img/tf_berry.png");      /* framboise*/
  --tf-t:url("../img/tf_teal.png");       /* sarcelle */
  --tf-w:url("../img/tf_white_s.png");    /* blanc doux (sur fond sarcelle) */
  --tf-ink:url("../img/tf_ink_s.png");    /* ton sur ton, très discret */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}

::selection{background:var(--sun);color:var(--ink)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 90%, transparent);
  backdrop-filter:blur(12px) saturate(1.15);
  border-bottom:1px solid var(--line);
}
.topbar .bar{
  max-width:var(--maxw);margin:0 auto;
  padding:12px clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:2rem;justify-content:space-between;
}
.wordmark{
  font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.01em;
  color:var(--ink);line-height:1;
}
.wordmark em{font-style:normal;color:var(--leaf)}
.wordmark small{
  display:block;font-family:var(--ui);font-weight:500;font-size:.58rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3em;
}
.wordmark:hover{text-decoration:none;transform:rotate(-1deg)}
.mainnav{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.5rem);list-style:none;margin:0;padding:0}
.mainnav a{
  font-size:.83rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);padding:.35rem 0;position:relative;
}
.mainnav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:3px;border-radius:3px;
  background:var(--sun);transition:right .22s ease;
}
.mainnav a:hover{text-decoration:none}
.mainnav a:hover::after,.mainnav a.active::after{right:0}
.mainnav a.active{color:var(--berry)}
.nav-cta{
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--berry);padding:.55rem 1.15rem;border-radius:999px;
  box-shadow:2.5px 2.5px 0 var(--sun);transition:.18s;white-space:nowrap;
}
.nav-cta:hover{text-decoration:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sun)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.45rem;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--ink);margin:5px 0;transition:.25s}

@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .mainnav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--card);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .mainnav.open{max-height:75vh}
  .mainnav li{width:100%}
  .mainnav a{display:block;padding:1rem clamp(18px,4vw,40px);border-top:1px solid var(--line)}
  .mainnav a::after{display:none}
  .mainnav a.active{background:var(--paper-deep)}
}

/* ---------- Vagues de transition ----------
   La vague chevauche le bloc précédent (marge négative) : sa partie creuse
   laisse voir le fond réel du bloc au-dessus, quel qu'il soit (crème clair
   ou foncé) — aucun raccord de couleur à gérer. */
.wave{display:block;width:100%;height:42px;margin:-42px 0 -1px;position:relative;z-index:1;pointer-events:none}
.wave svg{display:block;width:100%;height:100%}

/* ---------- Hero (accueil) ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(44px,8vw,96px) 0 clamp(40px,7vw,80px);
}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;
}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr}}
.over{
  font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--tang);margin:0 0 1.1rem;
}
/* fleur-puce devant les sur-titres — vraie fleur du collage de Sandrine */
.over::before{
  content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:.5em;
  vertical-align:-.22em;background:var(--tf-o) center/contain no-repeat;
  transform:rotate(-8deg);
}
.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.8rem,7vw,5rem);margin:0 0 .5em;
}
.hero h1 em{
  font-style:normal;color:var(--berry);position:relative;white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2 22 7 T 42 7 T 62 7 T 82 7 T 102 7 T 118 6' fill='none' stroke='%23e9b525' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 78%;background-size:100% .2em;
}
.hero .lead{
  font-size:clamp(1rem,1.9vw,1.2rem);color:var(--ink-soft);max-width:520px;margin:0 0 2rem;
}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.btn{
  display:inline-block;font-family:var(--ui);font-weight:700;font-size:.95rem;letter-spacing:.02em;
  background:var(--ink);color:#fff;padding:.9rem 1.75rem;border:0;border-radius:999px;
  cursor:pointer;transition:.18s;box-shadow:3px 3px 0 var(--sun);
}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--sun);background:var(--berry)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.line:hover{box-shadow:inset 0 0 0 2px var(--teal), 3px 3px 0 var(--paper-deep);color:var(--teal);background:transparent}

/* l'œuvre du hero : un tirage posé de travers, façon table d'atelier */
.hero-art{margin:0;position:relative}
.hero-art .print{
  background:#fff;padding:14px 14px 44px;border-radius:10px;
  box-shadow:var(--shadow-print);
  transform:rotate(2deg);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.hero-art:hover .print{transform:rotate(-.6deg) scale(1.015)}
.hero-art figcaption{
  position:absolute;left:28px;bottom:12px;
  font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink-soft);
}
.hero::before{
  content:"";position:absolute;inset:auto -6% -34% auto;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,181,37,.18),transparent 65%);pointer-events:none;
}
/* fleurs du thème, ENTIÈRES, ton sur ton en filigrane dans le hero.
   Positions décalées des bords en px + tailles qui tiennent dans le bloc :
   aucune fleur n'est rognée. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--tf-ink),var(--tf-ink),var(--tf-ink);
  background-repeat:no-repeat;
  background-position:left 10px bottom 44px, left 150px bottom 30px, right 60px top 60px;
  background-size:132px auto, 52px auto, 40px auto;
}
.hero .wrap{position:relative;z-index:1}   /* texte et cadre au-dessus des fleurs */
@media (max-width:880px){
  .hero::after{background-position:left 8px bottom 30px, left 110px bottom 18px, right 20px top 40px;
    background-size:96px auto,40px auto,32px auto}
}

/* ---------- Titres de section ---------- */
.sec-head{padding:clamp(38px,6vw,64px) 0 8px}
.sec-head .over{margin-bottom:.8rem}
.sec-head h1,.sec-head h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(2.1rem,5.2vw,3.4rem);margin:0 0 .35em;
}
.sec-head p{color:var(--ink-soft);max-width:640px;margin:0;font-size:1.05rem}

/* ---------- Masonry : proportions respectées ---------- */
.masonry{columns:3 280px;column-gap:22px;padding:8px 0 20px}
.masonry>*{break-inside:avoid;margin:0 0 22px}
.piece{display:block;position:relative}
.piece .print{
  background:#fff;padding:10px 10px 12px;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 2px rgba(46,38,24,.06);
  transition:box-shadow .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.piece:hover{text-decoration:none}
.piece:hover .print{box-shadow:var(--shadow-print);transform:translateY(-5px) rotate(-.8deg)}
.piece:nth-child(even):hover .print{transform:translateY(-5px) rotate(.8deg)}
.piece figure{margin:0;cursor:zoom-in;border-radius:5px;overflow:hidden}
a.piece figure{cursor:pointer}
.piece .meta{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.65rem .2rem 0;
}
.piece .meta b{
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:0;
}

/* stickers de catégorie — un clin d'œil malicieux */
.piece .meta span{
  font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:.28em .75em;border-radius:999px;white-space:nowrap;
  transform:rotate(-2.5deg);color:#fff;background:var(--teal);
}
.piece:nth-child(3n) .meta span{transform:rotate(2deg)}
.piece .meta span.t-album{background:var(--berry)}
.piece .meta span.t-affiche{background:var(--teal)}
.piece .meta span.t-identite{background:var(--sun);color:var(--ink)}
.piece .meta span.t-portrait,.piece .meta span.t-recitdevie{background:var(--tang)}

/* ---------- Chapitres ---------- */
.chapter{padding:clamp(34px,5.5vw,60px) 0;position:relative}
.chapter:nth-of-type(even){background:var(--paper-deep)}
.chapter-head{max-width:760px;margin-bottom:1.5rem}
.chapter-head .num{
  display:inline-block;font-family:var(--display);font-weight:800;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--sun);border-radius:999px;padding:.3em 1em;
  transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(42,33,24,.15);
}
.chapter:nth-of-type(even) .chapter-head .num{background:var(--card);transform:rotate(1.5deg)}
.chapter-head h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.7rem,3.8vw,2.5rem);margin:.4em 0 .35em;line-height:1.06;
}
.chapter-head p,.chapter .txt p{color:var(--ink-soft);margin:.45em 0}
.chapter .txt{max-width:720px}
.chapter .txt em{color:var(--ink)}
.subhead{
  font-family:var(--display);font-weight:700;font-size:1.25rem;margin:2.1rem 0 1rem;
  display:flex;align-items:center;gap:.9rem;
}
.subhead::after{content:"";flex:1;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 24px)}

.note{
  background:var(--card);border:2px dashed var(--sun);border-radius:14px;
  padding:1rem 1.3rem;color:var(--ink-soft);font-size:.9rem;margin:1.2rem 0;max-width:720px;
}
.note b{color:var(--ink)}

/* ---------- Vidéo ---------- */
.video{
  position:relative;max-width:680px;aspect-ratio:16/9;margin:1.6rem 0;
  background:#000;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-print);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Rangée de liens visuels ---------- */
.linkrow{display:flex;flex-wrap:wrap;gap:20px;margin:1.4rem 0}
.linkrow a{display:block;background:#fff;padding:8px;border:1px solid var(--line);border-radius:10px;
  transition:.22s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 2px rgba(46,38,24,.06)}
.linkrow a:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--shadow-print)}
.linkrow img{height:110px;width:auto;border-radius:4px}

/* ---------- Bande CTA ---------- */
.band{
  background-color:var(--teal);color:#eaf4f2;
  /* fleurs du thème (blanches, comme les frises sur fond coloré de l'original),
     ENTIÈRES dans les quatre angles — décalées en px, jamais rognées */
  background-image:var(--tf-w),var(--tf-w),var(--tf-w),var(--tf-w);
  background-repeat:no-repeat;
  background-position:left 40px top 40px, left 88px bottom 40px, right 52px top 36px, right 44px bottom 46px;
  background-size:74px auto, 46px auto, 92px auto, 52px auto;
  padding:clamp(46px,7vw,80px) 0 clamp(52px,7vw,86px);text-align:center;position:relative;overflow:hidden;
}
.band::before{
  /* halo décalé sous la jonction : le haut de la bande reste sarcelle pur,
     sans démarcation avec la vague au-dessus */
  content:"";position:absolute;top:56px;left:-6%;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,181,37,.22),transparent 62%);
}
.band::after{
  content:"";position:absolute;bottom:-46%;right:-4%;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(178,58,99,.30),transparent 65%);
}
.band h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.4vw,2.9rem);margin:0 0 .4em;color:#fff;position:relative;z-index:1;
}
.band p{color:#cfe5e2;max-width:520px;margin:0 auto 1.9rem;position:relative;z-index:1}
.band .btn{background:var(--sun);color:var(--ink);box-shadow:3px 3px 0 rgba(20,50,52,.5);position:relative;z-index:1}
.band .btn:hover{background:#fff;color:var(--teal);box-shadow:5px 5px 0 rgba(20,50,52,.5)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);padding:24px 0 40px}
@media (max-width:780px){.contact-grid{grid-template-columns:1fr}}
.form-field{margin-bottom:1.15rem}
.form-field label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.4rem;color:var(--ink-soft);
}
.form-field input,.form-field textarea{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);font:inherit;color:var(--ink);transition:border-color .15s;
}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,139,143,.18)}
.info-block{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px);
  box-shadow:0 1px 2px rgba(46,38,24,.06);height:fit-content;
}
.info-block h3{font-family:var(--display);font-weight:800;margin-top:0;font-size:1.5rem}
.info-block p{color:var(--ink-soft)}

/* ---------- Footer ---------- */
.site-footer{
  /* frise de fleurs du thème (rangée entière et répétée, comme le bandeau
     button.png de l'original), ton sur ton en haut du footer */
  border-top:1px solid var(--line);padding:52px 0 30px;background-color:var(--paper);position:relative;
  background-image:url("../img/tf_frieze_ink.png");
  background-repeat:repeat-x;background-position:left top 12px;background-size:auto 30px;
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline}
.site-footer .fmark{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--ink)}
.site-footer small{color:var(--ink-soft)}
.site-footer nav a{margin-left:1.2rem;font-size:.85rem;color:var(--ink-soft)}
.site-footer nav a:hover{color:var(--berry)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(26,21,14,.94);display:none;
  align-items:center;justify-content:center;z-index:100;padding:26px;cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff;padding:8px;border-radius:6px}
.lightbox .lb-close{position:absolute;top:16px;right:24px;color:#fff;font-size:2.4rem;line-height:1;background:none;border:0;cursor:pointer}

/* ---------- Apparitions ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-art .print,.piece .print,.btn,.nav-cta{transition:none}
}