/* =========================================================
   METEKA — STYLE GLOBAL V4
   Papyrus clair, dessin artisanal, rouge / noir.
   Mise en page fluide : gouttières latérales (motifs Side),
   bandeau photo à recadrage adaptatif, frise pleine largeur.

   Contraintes du site (CSP dans private/security_headers.php) :
   - aucun style en ligne : tout est dans ce fichier ;
   - polices hébergées ici (public/fonts), aucun appel à Google.
   ========================================================= */

@font-face{
    font-family:"Knewave";
    src:url("../fonts/knewave-400.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Patrick Hand SC";
    src:url("../fonts/patrick-hand-sc-400.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Crazy Rave";
    src:url("../fonts/crazy-rave.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Kalam";
    src:url("../fonts/kalam-700.woff2") format("woff2");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Lora";
    src:url("../fonts/lora-variable.woff2") format("woff2");
    font-weight:400 700;
    font-style:normal;
    font-display:swap;
}

:root{
    /* site uniquement clair : désactive l'assombrissement automatique (texte blanc sur fond papyrus clair) */
    color-scheme:only light;

    --paper:#f3dfbc;
    --ink:#17120e;
    --ink-soft:#3e3024;
    --red:#d3131e;
    --red-dark:#a70b13;
    --cream:#fff4df;
    --line:rgba(62,39,19,.22);

    --font-title:"Crazy Rave","Knewave","Segoe Print",cursive;
    --font-hand:"Patrick Hand SC","Segoe Print","Bradley Hand","Marker Felt",cursive;
    --font-btn:"Kalam","Patrick Hand SC","Segoe Print",cursive;
    --font-body:"Lora",Georgia,"Times New Roman",serif;

    /* gouttière latérale (accueille le motif) et largeur du motif */
    --gutter:clamp(14px,3.8vw,72px);
    --orn-w:clamp(20px,2.7vw,52px);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

*{
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    color:var(--ink);
    background:var(--paper);
    font-family:var(--font-body);
    overflow-x:hidden;
}

/* Fond papyrus fixe : aucun raccord visible, quelle que soit la hauteur de la page. */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:var(--paper) url("../images/web/papyrus.webp") center/cover no-repeat;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

button,
input,
textarea{
    font:inherit;
}

:focus-visible{
    outline:3px solid var(--red);
    outline-offset:3px;
}

.skip-link{
    position:absolute;
    left:12px;
    top:-60px;
    z-index:2000;
    padding:10px 16px;
    background:var(--ink);
    color:#fff;
    font-family:var(--font-hand);
    transition:top .15s;
}

.skip-link:focus{
    top:12px;
}

/* =========================================================
   CADRE + MOTIFS LATÉRAUX
   .frame  : colonne centrale avec gouttières de chaque côté
   .has-orn: affiche Side gauche / droite dans les gouttières
   ========================================================= */

.frame{
    position:relative;
    width:100%;
    max-width:1840px;
    margin-inline:auto;
    padding-inline:var(--gutter);
}

.has-orn::before,
.has-orn::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:var(--gutter);
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:var(--orn-w) auto;
    background-position:center top;
}

.has-orn::before{
    left:0;
    background-image:url("../images/web/orn-left.webp");
}

.has-orn::after{
    right:0;
    background-image:url("../images/web/orn-right.webp");
}

/* =========================================================
   EN-TÊTE
   ========================================================= */

.site-header{
    position:relative;
    z-index:20;
}

.site-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(22px,4.4vw,88px);
    min-height:clamp(84px,7.4vw,124px);
    padding-block:6px;
}

.site-logo{
    flex:0 0 auto;
}

.site-logo img{
    width:auto;
    height:clamp(64px,6.6vw,104px);
}

.site-nav{
    display:flex;
    align-items:center;
    gap:clamp(16px,3.1vw,60px);
    font-family:var(--font-hand);
    text-transform:uppercase;
    font-size:clamp(1rem,1.55vw,1.5rem);
    letter-spacing:.03em;
    white-space:nowrap;
}

.site-nav a{
    position:relative;
    padding:10px 2px 12px;
}

.site-nav a::after{
    content:"";
    position:absolute;
    left:-4%;
    bottom:3px;
    width:108%;
    height:3px;
    background:var(--red);
    transform:scaleX(0) rotate(-1.6deg);
    transform-origin:left center;
    transition:transform .18s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.active::after{
    transform:scaleX(1) rotate(-1.6deg);
}

/* =========================================================
   ACCUEIL — BANDEAU
   ========================================================= */

.home-main{
    flex:1 0 auto;
}

.home-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    aspect-ratio:2.7/1;
    background:#0b0d08;
    -webkit-mask:url("../images/web/hero-wide-mask.webp") 0 0/100% 100% no-repeat;
            mask:url("../images/web/hero-wide-mask.webp") 0 0/100% 100% no-repeat;
}

/* liseré de pinceau + traits de crayon autour du bandeau */
.home-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:url("../images/web/hero-wide-frame.webp") 0 0/100% 100% no-repeat;
}

.home-hero picture,
.home-hero picture img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.home-hero picture img{
    object-fit:cover;
    object-position:100% 50%;
}

.home-hero-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(5,8,4,.28) 100%);
}

.home-hero-title{
    position:absolute;
    z-index:2;
    left:3.4%;
    top:50%;
    width:41%;
    transform:translateY(-50%) rotate(-1.5deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5vw;
    font-weight:400;
}

.home-hero-logo{
    position:static;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.home-hero-tagline{
    display:block;
    font-family:var(--font-title);
    font-size:clamp(1.2rem,2.85vw,3.1rem);
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--cream);
    text-align:center;
    white-space:nowrap;
    /* contour sombre sous le remplissage crème : lisible sur fond clair comme sur fond foncé */
    paint-order:stroke fill;
    -webkit-text-stroke:.1em #17120e;
    text-shadow:.05em .06em 0 rgba(0,0,0,.6);
}

.home-hero-tagline em{
    color:#ff2a36;
    -webkit-text-stroke:.1em #17120e;
    font-style:normal;
    font-size:1.15em;
    line-height:.7;
    margin:0 .16em;
}

/* =========================================================
   ACCUEIL — 3 BLOCS
   ========================================================= */

.home-lower{
    padding-block:clamp(10px,1.6vw,26px) 0;
}

.home-lower.has-orn::before,
.home-lower.has-orn::after{
    background-position:center 48%;
}

.home-columns{
    display:grid;
    grid-template-columns:1fr 1.32fr .86fr;
}

.home-card{
    padding:clamp(10px,1.2vw,20px) clamp(16px,2.2vw,40px);
}

.home-card + .home-card{
    border-left:1px solid var(--line);
}

.hand-title{
    display:flex;
    align-items:center;
    gap:clamp(8px,.9vw,14px);
    margin-bottom:clamp(14px,1.5vw,22px);
    font-family:var(--font-hand);
    text-transform:uppercase;
}

.hand-title h2{
    position:relative;
    font-size:clamp(1.4rem,2vw,2rem);
    font-weight:400;
    line-height:.95;
    letter-spacing:.015em;
}

.hand-title h2::after{
    content:"";
    position:absolute;
    left:-2%;
    bottom:-10px;
    width:106%;
    height:3px;
    background:var(--red);
    transform:rotate(-1.4deg);
}

.tiny-diamond{
    position:relative;
    flex:0 0 auto;
    width:clamp(14px,1.3vw,19px);
    height:clamp(14px,1.3vw,19px);
    border:3px solid var(--ink);
    transform:rotate(45deg);
}

.tiny-diamond::after{
    content:"";
    position:absolute;
    inset:2px;
    background:var(--red);
}

.home-card p{
    max-width:34em;
    font-size:clamp(.95rem,1.08vw,1.1rem);
    line-height:1.5;
}

/* Bouton « coup de pinceau » */
.paint-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-width:clamp(160px,15vw,232px);
    margin-top:clamp(12px,1.4vw,20px);
    padding:clamp(8px,.8vw,12px) clamp(18px,1.8vw,28px);
    border:0;
    color:#fff;
    background:linear-gradient(180deg,#e01825 0%,#ca101c 100%);
    font-family:var(--font-btn);
    font-weight:700;
    font-size:clamp(.9rem,1.1vw,1.12rem);
    text-transform:uppercase;
    letter-spacing:.02em;
    cursor:pointer;
    transform:rotate(-.55deg);
    transition:background .15s,transform .15s;
    clip-path:polygon(
        0% 19%, 6% 11%, 13% 14%, 20% 6%, 28% 12%, 35% 5%,
        43% 10%, 51% 3%, 59% 10%, 67% 5%, 75% 12%, 83% 5%,
        91% 12%, 100% 8%,
        98% 83%, 91% 89%, 84% 85%, 77% 94%, 68% 88%,
        60% 96%, 51% 90%, 42% 97%, 33% 89%, 25% 95%,
        17% 88%, 9% 93%, 1% 86%
    );
}

.paint-link:hover,
.paint-link:focus-visible{
    background:linear-gradient(180deg,#ed1b2b 0%,#b90d18 100%);
    transform:translateY(-1px) rotate(-.9deg);
}

.paint-link:disabled{
    opacity:.7;
    cursor:wait;
}

.paint-link span{
    font-size:1.2em;
    line-height:1;
}

/* Mascotte (accueil) : à droite du texte « À propos » (texte + bouton à gauche) */

.home-about{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(10px,1.4vw,24px);
    align-content:start;
}

.home-about .hand-title{
    grid-column:1/-1;
}

.home-about p,
.home-about .paint-link{
    grid-column:1;
}

.home-about .paint-link{
    justify-self:start;
    white-space:nowrap;
}

.home-mascot{
    grid-column:2;
    grid-row:2/4;
    align-self:start;
    width:auto;
    height:clamp(140px,12.4vw,215px);
    margin-top:-6px;
    transform:rotate(3deg);
    filter:drop-shadow(4px 5px 0 rgba(23,18,14,.16));
}

/* Vidéos (accueil) */

.preview-videos{
    --pv-gap:clamp(8px,1vw,16px);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--pv-gap);
}

.preview-video{
    display:block;
}

.preview-frame{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    background:#111;
    overflow:hidden;
    -webkit-mask:url("../images/web/thumb-mask.webp") 0 0/100% 100% no-repeat;
            mask:url("../images/web/thumb-mask.webp") 0 0/100% 100% no-repeat;
}

.preview-frame::after,
.video-embed::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:url("../images/web/thumb-frame.webp") 0 0/100% 100% no-repeat;
}

.preview-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.9) contrast(1.05);
    transition:transform .35s ease;
}

.preview-video:hover .preview-frame img,
.preview-video:focus-visible .preview-frame img{
    transform:scale(1.05);
}

.preview-caption{
    display:block;
    margin-top:8px;
    font-family:var(--font-hand);
    font-size:clamp(.72rem,.85vw,.92rem);
    text-transform:uppercase;
    letter-spacing:.06em;
    line-height:1.25;
}

.play{
    position:absolute;
    left:50%;
    top:50%;
    width:clamp(34px,3.3vw,54px);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border:3px solid #fff;
    border-radius:50%;
    background:rgba(0,0,0,.42);
    transition:background .15s,transform .15s;
}

.play::after{
    content:"";
    position:absolute;
    left:52%;
    top:50%;
    transform:translate(-50%,-50%);
    border-left:clamp(10px,1vw,16px) solid #fff;
    border-top:clamp(7px,.68vw,11px) solid transparent;
    border-bottom:clamp(7px,.68vw,11px) solid transparent;
}

.preview-video:hover .play,
.preview-video:focus-visible .play{
    background:rgba(211,19,30,.85);
    transform:translate(-50%,-50%) scale(1.08);
}

/* Prochains concerts (sous les vidéos de l’accueil) */

.home-concerts{
    margin-top:clamp(20px,2vw,30px);
}

.concert-entry{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:8px 18px;
}

.concert-link{
    color:var(--red-dark);
    text-decoration:underline;
    text-underline-offset:3px;
}

.concert-link:hover,
.concert-link:focus-visible{
    color:var(--ink);
}

/* Contact (accueil) */

.home-contact{
    text-align:center;
}

.home-contact .hand-title{
    justify-content:center;
}

.home-contact p{
    margin-inline:auto;
}

.envelope-sketch{
    display:block;
    width:clamp(96px,10vw,158px);
    height:auto;
    margin:0 auto clamp(8px,.9vw,14px);
    overflow:visible;
}

.envelope-sketch path{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.envelope-sketch .ink{
    stroke:var(--ink);
    stroke-width:5.5;
}

.envelope-sketch .spark{
    stroke:var(--red);
    stroke-width:4.5;
}

/* =========================================================
   PIED DE PAGE
   Frise plate (FooterOne) : pleine largeur de la colonne, jamais déformée.
   ========================================================= */

.site-footer{
    margin-top:clamp(6px,1.4vw,24px);
    padding-bottom:12px;
}

.footer-frieze{
    line-height:0;
}

.footer-frieze img{
    width:100%;
    height:auto;
}

.footer-legal{
    margin-top:2px;
    text-align:center;
    font-size:.78rem;
    line-height:1.5;
    color:var(--ink-soft);
}

.footer-legal a{
    text-decoration:underline;
    text-underline-offset:2px;
}

.footer-legal a:hover{
    color:var(--red-dark);
}

/* Bandeau « pas de cookies de suivi » */

.cookie-notice{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px 18px;
    padding:14px 20px;
    background:#0d0d0d;
    color:#cfc4b2;
    border-top:5px solid var(--red);
    font-size:.9rem;
    text-align:center;
}

.cookie-notice[hidden]{
    display:none;
}

.cookie-notice p{
    max-width:640px;
}

.cookie-notice a{
    text-decoration:underline;
}

.cookie-notice__btn{
    flex-shrink:0;
    padding:9px 22px;
    border:0;
    background:var(--red);
    color:#fff;
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    cursor:pointer;
}

.cookie-notice__btn:hover{
    background:var(--red-dark);
}

/* =========================================================
   PAGES INTERNES
   ========================================================= */

.inner-main{
    flex:1 0 auto;
    padding-block:clamp(6px,1.4vw,22px) 8px;
}

.inner-main.has-orn::before,
.inner-main.has-orn::after{
    background-repeat:repeat-y;
}

.inner-content{
    max-width:1180px;
    margin-inline:auto;
}

.inner-heading{
    display:flex;
    align-items:center;
    gap:clamp(10px,1.2vw,16px);
    margin:clamp(6px,1vw,14px) 0 clamp(22px,2.6vw,36px);
    font-family:var(--font-hand);
    text-transform:uppercase;
}

.inner-heading h1{
    position:relative;
    font-size:clamp(2.1rem,4vw,3.8rem);
    font-weight:400;
    line-height:1;
}

.inner-heading h1::after{
    content:"";
    position:absolute;
    left:-1%;
    bottom:-11px;
    width:104%;
    height:4px;
    background:var(--red);
    transform:rotate(-1.2deg);
}

.inner-heading .tiny-diamond{
    width:clamp(16px,1.7vw,24px);
    height:clamp(16px,1.7vw,24px);
}

.paper-sheet{
    padding:clamp(20px,2.6vw,36px);
    background:rgba(255,242,216,.34);
    border:2px solid rgba(23,18,14,.5);
    clip-path:polygon(
        .25% .7%,5% .2%,11% .6%,18% .2%,26% .7%,35% .2%,
        45% .7%,55% .2%,65% .7%,75% .2%,85% .7%,95% .2%,99.7% .8%,
        99.5% 99%,92% 99.6%,82% 99%,72% 99.6%,62% 99%,52% 99.6%,
        42% 99%,32% 99.6%,22% 99%,12% 99.6%,.4% 99%
    );
}

/* À propos */

.about-layout{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(22px,3vw,44px);
    align-items:start;
}

.about-mascot{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-block:clamp(4px,1vw,14px);
}

.about-mascot img{
    width:auto;
    height:clamp(360px,36vw,540px);
    max-width:100%;
    transform:rotate(-3deg);
    filter:drop-shadow(5px 7px 0 rgba(23,18,14,.16));
}

.about-copy p{
    margin-bottom:1em;
    font-size:clamp(1rem,1.2vw,1.12rem);
    line-height:1.65;
}

.about-copy p:last-child{
    margin-bottom:0;
}

.about-copy .about-lead{
    padding-left:16px;
    border-left:6px solid var(--red);
    font-weight:700;
    font-size:clamp(1.08rem,1.4vw,1.28rem);
}

/* Vidéos */

.videos-page-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,2.4vw,34px);
}

.video-sheet{
    padding:clamp(12px,1.4vw,18px);
    background:rgba(255,242,216,.34);
    border:2px solid rgba(23,18,14,.5);
}

.video-embed{
    position:relative;
    aspect-ratio:16/9;
    background:#111;
    -webkit-mask:url("../images/web/thumb-mask.webp") 0 0/100% 100% no-repeat;
            mask:url("../images/web/thumb-mask.webp") 0 0/100% 100% no-repeat;
}

.video-embed iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/* Vignette + bouton lecture affichés tant que le lecteur (iframe yiny.org) n'a pas été demandé
   au clic (public/js/videos.js). */
.video-facade{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
}

.video-facade img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.9) contrast(1.05);
    transition:transform .35s ease;
}

.video-facade:hover img,
.video-facade:focus-visible img{
    transform:scale(1.05);
}

.video-facade:hover .play,
.video-facade:focus-visible .play{
    background:rgba(211,19,30,.85);
    transform:translate(-50%,-50%) scale(1.08);
}

.video-caption{
    margin-top:12px;
    font-family:var(--font-hand);
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:clamp(1rem,1.2vw,1.15rem);
}

.simple-video-link{
    display:inline-block;
    margin-top:8px;
    font-family:var(--font-hand);
    text-transform:uppercase;
    font-size:1.05rem;
    border-bottom:3px solid var(--red);
}

.simple-video-link:hover{
    color:var(--red-dark);
}

/* Écouter (pas encore de contenu : la mascotte tient la place) */

.listen-soon{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(6px,1vw,14px);
    padding-bottom:clamp(8px,2vw,28px);
}

.listen-soon img{
    width:auto;
    height:clamp(280px,52vh,560px);
    max-width:100%;
    transform:rotate(-2deg);
    filter:drop-shadow(5px 7px 0 rgba(23,18,14,.16));
}

.listen-soon-text{
    font-family:var(--font-title);
    font-size:clamp(1.8rem,3.4vw,3rem);
    text-transform:uppercase;
    letter-spacing:.02em;
    transform:rotate(-2deg);
}

/* Contact */

.contact-layout{
    display:grid;
    grid-template-columns:clamp(150px,19vw,260px) minmax(0,1fr);
    gap:clamp(20px,3vw,44px);
    align-items:start;
}

.contact-side{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:clamp(180px,26vw,380px);
}

.contact-side .envelope-sketch{
    width:100%;
    max-width:230px;
    margin:0;
}

.contact-intro{
    margin-bottom:22px;
    font-size:clamp(1rem,1.2vw,1.12rem);
    line-height:1.55;
}

.notice{
    margin-bottom:20px;
    padding:14px 16px;
    border:2px solid var(--ink);
    background:rgba(255,247,231,.5);
    font-weight:700;
    line-height:1.4;
}

.notice.success{
    border-left:8px solid #47764a;
}

.notice.error{
    border-left:8px solid var(--red);
    color:#6d1117;
}

.notice ul{
    margin:8px 0 0 20px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.field.full,
.submit-row{
    grid-column:1/-1;
}

.field label{
    font-family:var(--font-hand);
    font-size:1.02rem;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.field input,
.field textarea{
    width:100%;
    padding:11px 13px;
    border:2px solid var(--ink);
    border-radius:0;
    background:rgba(255,247,231,.4);
    color:var(--ink);
    font-weight:600;
    outline:none;
    box-shadow:2px 3px 0 rgba(23,18,14,.08);
}

.field input:focus,
.field textarea:focus{
    border-color:var(--red);
    background:rgba(255,247,231,.7);
}

.field textarea{
    min-height:210px;
    resize:vertical;
}

/* Anti-robots maison (private/BotGuard.php) : champ piège hors écran. */
.bot-guard__trap{
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

/* Pages légales (CGU / Confidentialité) */

.legal-sheet h2{
    margin:1.6em 0 .5em;
    font-family:var(--font-hand);
    font-size:1.35rem;
    font-weight:400;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.legal-sheet .legal-updated{
    margin:0 0 1.2em;
    font-family:var(--font-body);
    font-size:.95rem;
    font-style:italic;
    letter-spacing:0;
    text-transform:none;
}

.legal-sheet p,
.legal-sheet li{
    font-size:1.02rem;
    line-height:1.65;
}

.legal-sheet p{
    margin-bottom:.9em;
}

.legal-sheet ul{
    margin:0 0 1em 1.3em;
}

.legal-sheet li{
    margin-bottom:.35em;
}

.legal-sheet a{
    text-decoration:underline;
    text-underline-offset:2px;
}

.legal-sheet a:hover{
    color:var(--red-dark);
}

.legal-sheet code{
    padding:1px 5px;
    background:rgba(23,18,14,.08);
    font-size:.92em;
}

/* =========================================================
   GRANDS ÉCRANS (>= 1700 px) : rendu équivalent à un zoom navigateur
   de 90 % — colonne un peu plus étroite et textes un peu plus petits,
   pour que bandeau et 3 blocs tiennent mieux dans un même écran.
   ========================================================= */
@media (min-width:1700px){

    html{
        font-size:90%;
    }

    :root{
        --gutter:65px;
        --orn-w:47px;
    }

    .frame{
        max-width:1656px;
    }

    .site-header-inner{
        min-height:112px;
    }

    .site-logo img{
        height:94px;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* --- Tablette large / petit portable : 2 colonnes + contact en dessous --- */
@media (max-width:1000px){

    /* le bandeau garde le même ratio (2,7:1) que sur bureau : la photo n'est pas recadrée sur les côtés,
       Devi reste à droite, et le logo + la phrase à gauche ne la recouvrent pas */
    .home-hero-title{
        width:42%;
    }

    .home-hero-tagline{
        font-size:clamp(1.05rem,3.6vw,2.4rem);
    }

    /* À propos : deux colonnes (dessin à gauche, texte à droite) dès 701 px ; une seule colonne sous 700 px */
    .about-mascot img{
        height:clamp(300px,42vw,440px);
    }

    /* page Vidéos : 2 colonnes, la 3e (seule sur sa ligne) est centrée */
    .videos-page-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .video-sheet:nth-child(odd):last-child{
        grid-column:1/-1;
        width:calc((100% - clamp(18px,2.4vw,34px)) / 2);
        justify-self:center;
    }

    .home-columns{
        grid-template-columns:1fr 1.2fr;
    }

    .home-contact{
        grid-column:1/-1;
        border-left:0!important;
        border-top:1px solid var(--line);
        margin-top:8px;
        padding-top:22px;
        padding-bottom:6px;
    }

    .home-contact .envelope-sketch{
        width:clamp(96px,16vw,130px);
    }
}

/* colonne « À propos » étroite : mascotte plus petite, puis masquée */
@media (max-width:1180px){

    /* accueil, colonne Vidéos : 2 vignettes par ligne, la 3e centrée en dessous (3 en ligne seraient trop petites) */
    .preview-videos{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .preview-video:nth-child(odd):last-child{
        grid-column:1/-1;
        width:calc((100% - var(--pv-gap)) / 2);
        justify-self:center;
    }

    .home-mascot{
        height:clamp(112px,11vw,140px);
    }

    .home-about .paint-link{
        min-width:0;
        padding-inline:16px;
        gap:10px;
    }
}

@media (min-width:701px) and (max-width:790px){

    .home-about{
        display:block;
    }

    .home-mascot{
        display:none;
    }
}

/* --- Mobile / tablette portrait : une seule colonne --- */
@media (max-width:700px){

    :root{
        --gutter:14px;
    }

    .has-orn::before,
    .has-orn::after{
        display:none;
    }

    .site-header-inner{
        flex-direction:column;
        gap:0;
        padding-block:6px 4px;
    }

    .site-logo img{
        height:clamp(96px,27vw,130px);
    }

    .site-nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:0 clamp(7px,2.2vw,20px);
        font-size:clamp(.86rem,3.95vw,1.2rem);
    }

    /* format 1,2:1 : Devi à droite, la phrase « Punk onirique & indigène » à gauche ; le logo est dans l'en-tête */
    .home-hero{
        aspect-ratio:800/667;
        -webkit-mask-image:url("../images/web/hero-mobile-mask.webp");
                mask-image:url("../images/web/hero-mobile-mask.webp");
    }

    .home-hero::after{
        background-image:url("../images/web/hero-mobile-frame.webp");
    }

    .home-hero picture img{
        object-position:50% 50%;
    }

    .home-hero-shade{
        background:
            linear-gradient(90deg,rgba(5,8,4,.55) 0%,rgba(5,8,4,.28) 42%,rgba(5,8,4,0) 62%),
            radial-gradient(130% 95% at 50% 55%,transparent 62%,rgba(5,8,4,.30) 100%);
    }

    .home-hero-title{
        left:5%;
        top:9%;
        width:44%;
        transform:rotate(-2deg);
        align-items:flex-start;
        gap:0;
    }

    .home-hero-logo{
        display:none;
    }

    .home-hero-tagline{
        text-align:left;
        white-space:normal;
        font-size:clamp(1.4rem,7.8vw,2.6rem);
        line-height:1.02;
    }

    .home-hero-tagline .tl-a,
    .home-hero-tagline .tl-b,
    .home-hero-tagline .tl-c{
        display:block;
        white-space:nowrap;
    }

    .home-columns{
        grid-template-columns:1fr;
    }

    .home-card{
        padding:22px 6px;
    }

    .home-card + .home-card{
        border-left:0;
        border-top:1px solid var(--line);
    }

    .home-contact{
        grid-column:auto;
        margin-top:0;
    }

    .home-card p{
        max-width:none;
    }

    .about-layout,
    .videos-page-grid,
    .contact-layout{
        grid-template-columns:1fr;
    }

    .video-sheet:nth-child(odd):last-child{
        grid-column:auto;
        width:auto;
        justify-self:stretch;
    }

    .about-mascot img{
        height:clamp(260px,72vw,340px);
    }

    .contact-side{
        display:none;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .field.full,
    .submit-row{
        grid-column:auto;
    }

    .submit-row .paint-link{
        width:100%;
    }

    /* frise cadrée sur le centre (montagnes + soleil) pour rester lisible sur petit écran */
    .footer-frieze{
        overflow:hidden;
    }

    .footer-frieze img{
        width:170%;
        max-width:none;
        margin-left:-35%;
    }

    .cookie-notice{
        padding:12px 14px;
        font-size:.84rem;
    }
}

/* --- Petits mobiles --- */
@media (max-width:420px){

    .preview-videos{
        grid-template-columns:1fr;
    }

    .preview-video:nth-child(odd):last-child{
        grid-column:auto;
        width:auto;
        justify-self:stretch;
    }

    .paper-sheet{
        padding:18px 15px;
    }
}

@media (max-width:360px){

    .site-nav{
        gap:0 clamp(5px,1.8vw,8px);
        font-size:.8rem;
        letter-spacing:.01em;
    }
}

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition:none!important;
    }
}