/*
Theme Name: Parc Mali
Theme URI: https://parccaninoutremont.ca
Author: Association du Parc Canin d'Outremont
Author URI: https://parccaninoutremont.ca
Description: Thème sur mesure et bilingue (FR/EN) pour le site du Parc Mali, parc canin d'Outremont. Site multipage. Les nouvelles et les événements se gèrent comme des articles WordPress ordinaires. La mise en page des pages se fait avec des codes courts documentés dans Apparence > Guide Parc Mali.
Version: 2.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parcmali
Tags: one-column, custom-menu, editor-style, translation-ready, custom-colors
*/

/* ============================================================
   1. Jetons de design — papier vergé, encre sépia, lavis Potter
   ============================================================ */
:root{
  --paper:#F7F1E1;
  --paper2:#EFE6D0;
  --ink:#3B3128;
  --ink-70:rgba(59,49,40,.74);
  --ink-55:rgba(59,49,40,.56);
  --moss:#56663F;
  --sage:#7D8C63;
  --slate:#8C9DAA;
  --ochre:#C8A25C;
  --rose:#B9806E;
  --line:rgba(59,49,40,.16);
  --line2:rgba(59,49,40,.34);
  --display:"Cormorant Garamond",Garamond,Georgia,serif;
  --body:"EB Garamond",Garamond,Georgia,serif;
  --wrap:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:var(--body);font-size:17.5px;line-height:1.62;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,rgba(59,49,40,.016) 0 1px,transparent 1px 4px),
    radial-gradient(60% 40% at 18% 8%,rgba(200,162,92,.07),transparent 70%),
    radial-gradient(55% 45% at 88% 72%,rgba(125,140,99,.06),transparent 70%);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100}
.skip-link:focus{left:0}

/* ============================================================
   2. Bilinguisme — deux versions du texte, une seule visible
   ============================================================ */
.lang-fr{display:contents}
.lang-en{display:none}
html[data-lang="en"] .lang-fr{display:none}
html[data-lang="en"] .lang-en{display:contents}

/* ============================================================
   3. Voix typographique
   ============================================================ */
.tag{font-family:var(--body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.sec{padding:88px 0;border-top:3px double var(--line2)}
.sec:first-child{border-top:0}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:38px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.4vw,46px);line-height:1.06;margin:0;letter-spacing:.005em}
.sec-head .tag{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:.06em;text-transform:none;color:var(--sage)}
.stamp{font-family:var(--body);font-style:italic;font-size:14.5px;color:var(--ink-55)}
.stamp::before{content:"— "}
.pm-note{font-family:var(--display);font-style:italic;font-size:17px;color:var(--ink-55);line-height:1.5}

/* ============================================================
   4. En-tête
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,241,225,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line2)}
body.admin-bar .site-header{top:32px}
.bar{display:flex;align-items:center;gap:20px;padding:12px 0;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.mark{width:38px;height:38px;border-radius:50%;background:var(--paper2);display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--ink);border:1px solid var(--line2);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line);overflow:hidden}
.mark img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brand b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.01em;display:block;line-height:1.1}
.brand i{font-style:italic;font-family:var(--body);font-size:13px;letter-spacing:.03em;color:var(--ink-55)}
.site-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;font-size:16px;padding:2px 0;border-bottom:1px solid transparent;display:inline-block}
.site-nav a:hover{border-bottom-color:var(--rose)}
.site-nav .current-menu-item > a,.site-nav .current_page_item > a{border-bottom-color:var(--ink)}
.lang-switch{display:flex;font-family:var(--body);font-size:13px;letter-spacing:.1em;border:1px solid var(--line2);border-radius:2px;overflow:hidden;flex:none}
.lang-switch button{border:0;background:none;padding:5px 10px;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--ink-55)}
.lang-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.nav-toggle{display:none;border:1px solid var(--line2);background:none;border-radius:2px;padding:6px 12px;font:inherit;font-size:15px;cursor:pointer;color:var(--ink)}

/* ============================================================
   5. Boutons
   ============================================================ */
.btn{display:inline-block;text-decoration:none;background:var(--ink);color:var(--paper);padding:9px 20px;border-radius:2px;font-family:var(--body);font-size:16px;letter-spacing:.03em;border:1px solid var(--ink);cursor:pointer;line-height:1.4}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ============================================================
   6. Frontispice (page d'accueil) et têtes de page
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero-img{width:100%;display:block;mix-blend-mode:multiply}
.hero-copy{position:relative;z-index:2;padding:46px 28px 8px;max-width:660px;margin:0 auto}
.hero-copy h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.2vw,58px);line-height:1.04;letter-spacing:.005em;margin:14px 0 22px;text-wrap:balance}
.hero-copy h1 em{font-style:italic;color:var(--moss)}
.lede{font-size:18px;line-height:1.6;max-width:42ch;color:var(--ink-70)}
.cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
@media(min-width:1000px){
  .hero-copy{position:absolute;left:0;top:50%;transform:translateY(-52%);width:36%;max-width:none;padding:0 0 0 max(28px,calc((100vw - var(--wrap))/2 + 28px))}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(247,241,225,.97) 0%,rgba(247,241,225,.94) 28%,rgba(247,241,225,.6) 43%,rgba(247,241,225,0) 60%)}
}
.page-head{padding:64px 0 8px}
.page-head .tag{display:block;font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:.06em;text-transform:none;color:var(--sage);margin-bottom:8px}
.page-head h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.8vw,52px);line-height:1.05;margin:0;letter-spacing:.005em;text-wrap:balance}
.page-head .lede{margin-top:18px;max-width:56ch}

/* ============================================================
   7. Plaques, listes, chiffres
   ============================================================ */
.plaques{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 28px}
.plaques.cols-3{grid-template-columns:repeat(3,1fr)}
.plaques.cols-1{grid-template-columns:1fr}
.card{background:var(--paper2);border:1px solid var(--line2);border-radius:2px;padding:26px;position:relative;
  box-shadow:inset 0 0 0 3px var(--paper2),inset 0 0 0 4px var(--line)}
.card > h3{font-family:var(--display);font-weight:600;font-size:24px;margin:0 0 10px;letter-spacing:.01em}
.card p{margin:0 0 14px;font-size:16.5px;color:var(--ink-70)}
.card p:last-child{margin-bottom:0}
.card.has-dog{padding-top:36px}
.card.has-dog > h3{max-width:calc(100% - 96px)}
.pm-list{list-style:none;margin:0;padding:0;font-size:16.5px}
.pm-list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:14px}
.pm-list li:last-child{border-bottom:0}
.pm-list .k{font-family:var(--display);font-style:italic;font-size:16px;color:var(--sage);min-width:88px;padding-top:2px;flex:none}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line2);margin:0 0 30px}
.chiffres > div{background:var(--paper);padding:24px 22px}
.chiffres .n{font-family:var(--display);font-weight:500;font-size:38px;line-height:1;display:block}
.chiffres .l{font-family:var(--body);font-style:italic;font-size:14.5px;color:var(--ink-55);margin-top:6px;display:block}

/* ============================================================
   8. Vignettes à l'aquarelle, non rognées
   ============================================================ */
.vig{mix-blend-mode:multiply;display:block;
  -webkit-mask-image:radial-gradient(ellipse 56% 52% at 50% 47%,#000 56%,transparent 80%);
          mask-image:radial-gradient(ellipse 56% 52% at 50% 47%,#000 56%,transparent 80%)}
.card .vig{position:absolute;top:-30px;right:-16px;width:126px;height:126px;pointer-events:none}
.vig-solo{width:150px;height:150px;margin:0 auto}
.saisons{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:34px 0 10px}
.saisons figure{margin:0;text-align:center;position:relative}
.saisons img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;mix-blend-mode:multiply}
.saisons figure::after{content:"";position:absolute;top:0;left:0;width:100%;aspect-ratio:1/1;border-radius:50%;
  border:1px solid var(--line2);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--line);pointer-events:none}
.saisons figcaption{font-family:var(--display);font-style:italic;font-size:17px;color:var(--ink-70);margin-top:12px}
.frise{display:flex;justify-content:center;gap:0;margin-top:12px;flex-wrap:wrap}
.frise img{width:138px;height:138px;mix-blend-mode:multiply;margin:0 -16px;
  -webkit-mask-image:radial-gradient(ellipse 54% 52% at 50% 47%,#000 55%,transparent 78%);
          mask-image:radial-gradient(ellipse 54% 52% at 50% 47%,#000 55%,transparent 78%)}
.band{background:var(--paper2);padding:26px 0 18px;text-align:center;border-top:3px double var(--line2);border-bottom:3px double var(--line2)}
.band .tag{display:block;margin-bottom:4px}

/* ============================================================
   9. Chronologie
   ============================================================ */
.chrono{list-style:none;margin:0 0 28px 6px;padding:0;border-left:1px solid var(--line2)}
.chrono li{position:relative;padding:0 0 26px 28px}
.chrono li::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--ink-55)}
.chrono li.now::before{background:var(--rose);border-color:var(--ink)}
.chrono .yr{font-family:var(--display);font-style:italic;font-size:17px;color:var(--sage);display:block;margin-bottom:1px}
.chrono p{margin:0;font-size:16.5px;max-width:58ch}

/* ============================================================
   10. Le plan arpenté
   ============================================================ */
.plan svg{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.legend button{font-family:var(--body);font-size:13.5px;background:none;border:1px solid var(--line2);border-radius:2px;padding:4px 10px;cursor:pointer;color:var(--ink-70);display:flex;align-items:center;gap:7px}
.legend button[aria-pressed="false"]{opacity:.42;text-decoration:line-through}
.swatch{width:9px;height:9px;border-radius:50%;flex:none}
.plan-note{font-family:var(--body);font-style:italic;font-size:14px;color:var(--ink-55);margin-top:11px;line-height:1.5}
.counter{font-family:var(--display);font-weight:600;font-size:17px}
.tree{transform-origin:center;transform-box:fill-box}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ============================================================
   11. Formulaires
   ============================================================ */
.field{display:block;margin-bottom:12px}
.field > span{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink-55);display:block;margin-bottom:4px}
.field input,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line2);border-radius:2px;background:var(--paper);font:inherit;font-size:16.5px;color:var(--ink)}
.amts{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.amts label{font-family:var(--body);font-size:16px;padding:7px 15px;border:1px solid var(--line2);background:none;border-radius:2px;cursor:pointer;color:var(--ink)}
.amts input{position:absolute;opacity:0;width:0;height:0}
.amts label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.amts label:focus-within{outline:2px solid var(--ochre);outline-offset:2px}
.pm-hp{position:absolute;left:-9999px}
.pm-notice{border:1px solid var(--line2);border-left:3px solid var(--moss);background:var(--paper2);padding:14px 18px;margin:0 0 22px;font-size:16.5px}
.pm-notice.err{border-left-color:var(--rose)}

/* ============================================================
   12. Nouvelles
   ============================================================ */
.news{border-top:1px solid var(--line2)}
.news article{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:118px 100px 1fr;gap:20px;align-items:start}
.news time{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink-55);padding-top:4px}
.news .thumb{width:100px;height:100px;object-fit:cover;border-radius:50%;mix-blend-mode:multiply;box-shadow:0 0 0 1px var(--line2)}
.news h2,.news h3{font-family:var(--display);font-weight:600;font-size:22px;margin:0 0 4px;letter-spacing:.01em}
.news h2 a,.news h3 a{text-decoration:none}
.news h2 a:hover,.news h3 a:hover{text-decoration:underline;text-decoration-color:var(--rose)}
.news p{margin:0;font-size:16.5px;color:var(--ink-70)}
.news .meta{font-family:var(--display);font-style:italic;font-size:15px;color:var(--sage);margin-top:5px}
.cat-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.cat-pills a{font-family:var(--body);font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line2);border-radius:2px;padding:4px 12px;color:var(--ink-70)}
.cat-pills a.on,.cat-pills a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pm-pager{display:flex;justify-content:space-between;gap:16px;margin-top:34px;font-family:var(--display);font-style:italic;font-size:17px}
.pm-pager a{text-decoration:none;border-bottom:1px solid var(--line2)}

/* ============================================================
   13. Contenu rédigé dans l'éditeur
   ============================================================ */
.entry{max-width:none}
.entry-body{font-size:17.5px}
.entry-body > *{max-width:68ch}
.entry-body > .plaques,.entry-body > .chiffres,.entry-body > .saisons,.entry-body > .plan,
.entry-body > .frise,.entry-body > .pm-form{max-width:none}
.entry-body h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,36px);line-height:1.1;margin:52px 0 14px;letter-spacing:.005em}
.entry-body h3{font-family:var(--display);font-weight:600;font-size:23px;margin:34px 0 10px}
.entry-body h4{font-family:var(--body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin:30px 0 8px}
.entry-body p{margin:0 0 18px}
.entry-body ul,.entry-body ol{margin:0 0 20px;padding-left:24px}
.entry-body li{margin-bottom:7px}
.entry-body a{text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:2px}
.entry-body blockquote{margin:26px 0;padding-left:22px;border-left:2px solid var(--line2);font-family:var(--display);font-style:italic;font-size:21px;color:var(--ink-70)}
.entry-body img{mix-blend-mode:multiply}
.entry-body figure{margin:30px 0}
.entry-body figcaption{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink-55);margin-top:8px;text-align:center}
.entry-body hr{border:0;border-top:3px double var(--line2);margin:44px 0}
.entry-body table{width:100%;border-collapse:collapse;margin:0 0 24px}
.entry-body th,.entry-body td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
.entry-body th{font-family:var(--display);font-style:italic;font-weight:500;color:var(--sage)}
.single .entry-body > p:first-of-type::first-letter{font-family:var(--display);font-size:66px;line-height:.8;float:left;margin:6px 10px 0 0;color:var(--moss)}
.alignwide{max-width:none}
.aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.wp-caption-text{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink-55)}

/* ============================================================
   14. Pied de page
   ============================================================ */
.site-footer{background:var(--ink);color:var(--paper);padding:0 0 34px;margin-top:74px}
.site-footer a{color:var(--paper)}
.site-footer .cols2{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-top:56px}
.site-footer h2{font-family:var(--body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre);margin:0 0 13px;font-weight:400}
.site-footer p,.site-footer li{font-size:16px;color:rgba(247,241,225,.82);margin:0 0 7px}
.site-footer ul{list-style:none;padding:0;margin:0}
.credit{margin-top:42px;padding-top:18px;border-top:1px solid rgba(247,241,225,.2);font-family:var(--body);font-style:italic;font-size:14px;color:rgba(247,241,225,.62);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ============================================================
   15. Petits écrans
   ============================================================ */
@media(max-width:900px){
  .plaques,.plaques.cols-3,.site-footer .cols2{grid-template-columns:1fr}
  .sec{padding:58px 0}
  .page-head{padding:44px 0 4px}
  .saisons{grid-template-columns:repeat(2,1fr)}
  .news article{grid-template-columns:80px 1fr;gap:16px}
  .news time{grid-column:1/-1;padding-top:0}
  .news .thumb{width:80px;height:80px}
  .frise img{width:100px;height:100px}
  .nav-toggle{display:block;order:3}
  .site-nav{order:5;flex-basis:100%;display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:6px 0 12px}
  .site-nav li{border-top:1px solid var(--line)}
  .site-nav a{padding:11px 0;width:100%}
  .bar{flex-wrap:wrap}
  .bar > .btn{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}