/* Skaffiti Wood Design : feuille unique du site.
   Palette : Noir #181717, Cotton #EDEBDD, Rouge Skaffiti #FF3131 (lu dans le SVG du logo).
   Règles de contraste (scripts/verifier-contrastes.py) :
   - rouge sur Cotton = 3,06 : jamais du texte de moins de 24 px ; le rouge en texte
     (var(--rouge)) a donc toujours font-size >= 24px, dans les deux modes ;
   - petit texte rouge : var(--rouge-txt) seulement, jamais dans une bande ;
   - boutons rouges : texte Noir gras, 19 px et plus.
   Aucun style en ligne dans le HTML : la CSP du .htaccess les refuse. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/permanent-marker-400.woff2) format('woff2')}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pt-sans-400.woff2) format('woff2')}
@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/pt-sans-400-italic.woff2) format('woff2')}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/pt-sans-700.woff2) format('woff2')}

/* --- Modes ------------------------------------------------------------------
   Sombre par défaut ; clair si le système le préfère, sauf choix manuel
   (data-theme posé par le petit script du <head>, mémorisé dans localStorage). */
:root{
  --noir:#181717;--cotton:#EDEBDD;--rouge:#FF3131;
  --bg:#181717;--fg:#EDEBDD;--muted:rgba(237,235,221,.8);--line:rgba(237,235,221,.5);
  --band-bg:#EDEBDD;--band-fg:#181717;--band-muted:#4a4846;--band-line:rgba(24,23,23,.5);
  --rouge-txt:#F25A52;--ghost:rgba(237,235,221,.6);
  --logo-pour-cotton:block;--logo-pour-noir:none;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EDEBDD;--fg:#181717;--muted:rgba(24,23,23,.82);--line:rgba(24,23,23,.5);
    --band-bg:#181717;--band-fg:#EDEBDD;--band-muted:rgba(237,235,221,.75);--band-line:rgba(237,235,221,.5);
    --rouge-txt:#B3241E;--ghost:rgba(24,23,23,.6);
    --logo-pour-cotton:none;--logo-pour-noir:block;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#EDEBDD;--fg:#181717;--muted:rgba(24,23,23,.82);--line:rgba(24,23,23,.5);
  --band-bg:#181717;--band-fg:#EDEBDD;--band-muted:rgba(237,235,221,.75);--band-line:rgba(237,235,221,.5);
  --rouge-txt:#B3241E;--ghost:rgba(24,23,23,.6);
  --logo-pour-cotton:none;--logo-pour-noir:block;
  color-scheme:light;
}

/* --- Base --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'PT Sans',system-ui,sans-serif;font-size:18px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{opacity:.8}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:16px;top:-60px;background:var(--rouge);color:var(--noir);font-weight:700;font-size:19px;padding:10px 18px;border-radius:999px;z-index:100;text-decoration:none}
.lien-evitement:focus{top:12px}
.conteneur{max-width:1344px;margin:0 auto;padding-left:56px;padding-right:56px}
.titre{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.tag{font-family:'Permanent Marker',cursive;color:var(--rouge);font-size:26px;display:inline-block;transform:rotate(-3deg);line-height:1.2}
.trait{height:1px;background:var(--line);border:0;margin:28px 0}

/* --- Boutons ------------------------------------------------------------------ */
.bouton{display:inline-block;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;border-radius:999px;line-height:1.2;text-align:center}
.bouton-rouge{background:var(--rouge);color:var(--noir);font-weight:700;font-size:19px}
.bouton-contour{border:1px solid var(--ghost);color:var(--fg);padding:15px 28px}
.boutons{display:flex;flex-wrap:wrap;gap:16px}

/* --- Entête : bande inversée, logo, menu, bascule --------------------------- */
.entete{background:var(--band-bg);color:var(--band-fg);padding:14px 48px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.entete-logo{display:block;line-height:0}
.entete-logo img{height:64px;width:auto}
.logo-pour-cotton{display:var(--logo-pour-cotton)}
.logo-pour-noir{display:var(--logo-pour-noir)}
.menu{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
/* Deux groupes pour le mobile ; sur ordinateur ils disparaissent (display:contents) et le menu
   se comporte exactement comme avant : liens, Nous contacter, bascule, sur une même ligne. */
.menu-liens,.menu-actions{display:contents}
.menu a{color:var(--band-fg);text-decoration:none;padding:8px 0}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--rouge);text-decoration-thickness:3px;text-underline-offset:8px}
.menu a.menu-contact{background:var(--band-fg);color:var(--band-bg);padding:12px 22px;border-radius:999px}
.menu a.menu-contact[aria-current="page"]{text-decoration-color:var(--rouge)}
.bascule{background:transparent;border:1px solid var(--band-line);color:var(--band-fg);width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bascule svg{width:20px;height:20px}
.bascule .icone-soleil{display:var(--logo-pour-cotton)}
.bascule .icone-lune{display:var(--logo-pour-noir)}
.sans-js .bascule{display:none}

/* --- Pied de page --------------------------------------------------------------- */
.pied{background:var(--band-bg);color:var(--band-fg);padding:22px 56px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between;font-size:15px}
.pied-gauche,.pied-droite{flex:1 1 220px}
.pied-gauche img{width:40px;height:auto}
.pied-centre{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.pied-centre a{color:var(--band-fg);text-underline-offset:5px;padding:8px 0}
.pied-droite{text-align:right}

/* --- Cadres en lignes de coupe -------------------------------------------------- */
.cadre{position:relative;padding:26px}
.cadre .ln{position:absolute;background:var(--line)}
.cadre .ln-h{top:12px;left:var(--t1,-16px);right:var(--t2,-16px);height:1px;transform-origin:left center}
.cadre .ln-b{bottom:12px;left:var(--b1,-16px);right:var(--b2,-16px);height:1px;transform-origin:right center}
.cadre .ln-g{left:12px;top:var(--l1,-16px);bottom:var(--l2,-16px);width:1px;transform-origin:center top}
.cadre .ln-d{right:12px;top:var(--r1,-16px);bottom:var(--r2,-16px);width:1px;transform-origin:center bottom}
.v1{--t1:-24px;--t2:-8px;--r1:-12px;--r2:-30px;--b1:-10px;--b2:-26px;--l1:-28px;--l2:-12px}
.v2{--t1:-20px;--t2:44px;--r1:44px;--r2:-18px;--b1:-24px;--b2:-12px;--l1:-14px;--l2:-26px}
.v3{--t1:-12px;--t2:-26px;--r1:-22px;--r2:-12px;--b1:44px;--b2:-20px;--l1:-26px;--l2:44px}
.v4{--t1:48px;--t2:-24px;--r1:-18px;--r2:30px;--b1:-14px;--b2:-22px;--l1:48px;--l2:-12px}
.v1 .ln-h{--o:0s}.v1 .ln-d{--o:.35s}.v1 .ln-b{--o:.7s}.v1 .ln-g{--o:1.05s}
.v2 .ln-g{--o:0s}.v2 .ln-h{--o:.3s}.v2 .ln-d{--o:.6s}.v2 .ln-b{--o:.95s}
.v3 .ln-b{--o:0s}.v3 .ln-d{--o:.3s}.v3 .ln-h{--o:.65s}.v3 .ln-g{--o:.95s}
.v4 .ln-d{--o:0s}.v4 .ln-b{--o:.35s}.v4 .ln-g{--o:.7s}.v4 .ln-h{--o:1s}
.v1 .photo{--p:0s}.v2 .photo{--p:.15s}.v3 .photo{--p:.05s}.v4 .photo{--p:.25s}
.d0{--d:0s}.d1{--d:.2s}.d2{--d:.4s}.d3{--d:.6s}.d4{--d:.8s}.d5{--d:1s}
.photo{overflow:hidden;border-radius:18px;background:rgba(127,127,127,.15)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-carree{aspect-ratio:1/1}
.photo-43{aspect-ratio:4/3}
.photo-32{aspect-ratio:3/2}
.photo-169{aspect-ratio:16/9}
/* Les couvertures d'articles (3:1) portent leur titre à gauche : on cadre à gauche. */
.carte-article .photo img{object-position:0% 50%}

@keyframes dessin-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dessin-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes balayage-1{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes balayage-2{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes balayage-3{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes balayage-4{from{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* Toute l'animation vit ici. L'état « caché avant animation » n'existe que si le JS
   a posé .anim sur <html> : sans JS ou avec réduction des animations, tout est complet. */
@media (prefers-reduced-motion: no-preference){
  .anim .cadre:not(.vu) .ln-h,.anim .cadre:not(.vu) .ln-b{transform:scaleX(0)}
  .anim .cadre:not(.vu) .ln-g,.anim .cadre:not(.vu) .ln-d{transform:scaleY(0)}
  .anim .cadre:not(.vu) .photo{opacity:0}
  .anim .cadre.vu .ln-h,.anim .cadre.vu .ln-b{animation:dessin-x .5s cubic-bezier(.65,.05,.25,1) both;animation-delay:calc(var(--d,0s) + var(--o,0s))}
  .anim .cadre.vu .ln-g,.anim .cadre.vu .ln-d{animation:dessin-y .5s cubic-bezier(.65,.05,.25,1) both;animation-delay:calc(var(--d,0s) + var(--o,0s))}
  .anim .cadre.vu.v1 .photo{animation:balayage-1 .4s ease-out both;animation-delay:calc(var(--d,0s) + 1.6s + var(--p,0s))}
  .anim .cadre.vu.v2 .photo{animation:balayage-2 .4s ease-out both;animation-delay:calc(var(--d,0s) + 1.6s + var(--p,0s))}
  .anim .cadre.vu.v3 .photo{animation:balayage-3 .4s ease-out both;animation-delay:calc(var(--d,0s) + 1.6s + var(--p,0s))}
  .anim .cadre.vu.v4 .photo{animation:balayage-4 .4s ease-out both;animation-delay:calc(var(--d,0s) + 1.6s + var(--p,0s))}
}

/* --- Accueil : héros ------------------------------------------------------------ */
.heros{padding-top:64px;padding-bottom:40px;position:relative}
.heros-grille{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.heros-arche{flex:0 0 320px;max-width:100%;position:relative}
.heros-arche .photo{height:460px;border-radius:999px 999px 20px 20px}
.heros-arche .photo img{object-position:58% 30%}
.heros-texte{flex:1 1 440px;min-width:0;position:relative;padding-top:8px}
.heros-hachures{position:absolute;right:0;top:-36px;width:120px;height:64px;color:var(--line)}
.heros-texte h1{margin:0;font-size:clamp(44px,6.4vw,92px);line-height:.98;color:var(--fg)}
.heros-texte .chapeau{margin:0 0 28px;font-size:19px;line-height:1.5;max-width:520px;color:var(--muted)}
.heros-pilule{flex:0 0 240px;max-width:100%;position:relative;margin-top:40px}
.heros-pilule .photo{height:300px;border-radius:999px}
.heros-pilule .photo img{object-position:50% 40%}

/* --- Accueil : nouvelles --------------------------------------------------------- */
.lien-fleche{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);text-underline-offset:6px;padding:10px 0}
.galerie{padding-top:72px}
.nouvelles{padding-top:72px;padding-bottom:80px}
.entete-section{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.entete-section h2,.entete-section h1{margin:0;font-size:clamp(40px,5vw,64px);color:var(--fg)}
.entete-section .tag{font-size:24px;transform:rotate(-2deg)}
.cartes-articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px 40px}
.carte-article{text-decoration:none;color:var(--fg);display:block}
.carte-article .date,.carte-article .titre{margin-left:26px;margin-right:26px}
.carte-article .date{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge-txt)}
.carte-article .titre{font-size:26px;letter-spacing:.03em;margin-top:8px;line-height:1.1}
.carte-article .date{display:block;margin-top:6px}

/* --- Pages intérieures ------------------------------------------------------------ */
.page{padding-top:64px;padding-bottom:88px}
.page .entete-section{margin-bottom:56px}
.intro-categorie{max-width:720px;margin:-32px 0 40px;color:var(--muted);font-size:19px;line-height:1.5}
.lien-rouge{color:var(--rouge-txt);text-underline-offset:3px}
.fil{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.fil a{color:var(--muted);text-underline-offset:4px}
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px 48px}
.carte{text-decoration:none;color:var(--fg);display:block}
.carte-legende{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 26px 0}
.carte-legende .titre{font-size:22px;letter-spacing:.04em;line-height:1.15}
.carte-legende .fleche{color:var(--rouge);font-size:24px;line-height:1}
.techniques{padding-top:72px}
.technique{margin-top:48px}
.technique:first-of-type{margin-top:0}
.technique .entete-section{margin-bottom:24px}
.slider{position:relative}
.slider-cartes{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.slider-cartes::-webkit-scrollbar{display:none}
.slider-cartes .carte-slide{flex:0 0 calc((100% - 48px)/3);min-width:200px;scroll-snap-align:start}
.slider-bouton{position:absolute;top:calc(50% - 18px);width:44px;height:44px;border:none;border-radius:999px;background:var(--rouge);color:var(--noir);font-weight:700;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.slider-bouton[hidden]{display:none}
.slider-prec{left:-8px}
.slider-suiv{right:-8px}
.texte-long{max-width:760px}
.texte-long p,.texte-long li{color:var(--fg)}
.texte-long h2,.texte-long h3{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.texte-long a{text-underline-offset:4px}
.deux-colonnes{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.deux-colonnes > .col-photo{flex:0 1 420px;min-width:0;width:100%}
.deux-colonnes > .col-texte{flex:1 1 420px;min-width:0}
.fiche h1{font-size:clamp(32px,4vw,52px);line-height:1.05;margin:0 0 20px}
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:8px 26px 0;padding:0;list-style:none}
.vignettes a{display:block;border-radius:10px;overflow:hidden;border:2px solid transparent;aspect-ratio:1/1}
.vignettes a[aria-current="true"]{border-color:var(--rouge)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.appel{margin-top:36px}
.contact-bloc{max-width:620px}
.contact-bloc p{font-size:19px;color:var(--fg)}
.piege{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire-contact{margin:24px 0}
.champ{margin-bottom:20px}
.champ label{display:block;font-size:14px;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.champ input,.champ textarea{width:100%;box-sizing:border-box;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:inherit;font-size:16px}
.champ textarea{resize:vertical;min-height:140px}
.champ input:focus,.champ textarea:focus{border-color:var(--rouge)}
.formulaire-contact .bouton{border:none;cursor:pointer}
.formulaire-contact .bouton:disabled{opacity:.6;cursor:default}
.formulaire-msg{margin-top:14px;font-size:15px}
.formulaire-msg.ok{color:var(--fg)}
.formulaire-msg.erreur{color:var(--rouge-txt)}
.article-image{margin:0 0 32px}

/* --- Petits écrans ---------------------------------------------------------------- */
@media (max-width: 760px){
  .conteneur{padding-left:16px;padding-right:16px}
  /* Mobile : logo centré avec de l'air de chaque côté ; en dessous, les trois liens sur une
     ligne, centrés ; en dessous encore, Nous contacter et la bascule côte à côte, centrés. */
  .entete{padding:14px 24px 16px;flex-direction:column;align-items:center;justify-content:center;gap:10px}
  .entete-logo{margin:0 auto;padding:0 24px}
  .entete-logo img{height:52px;margin:0 auto}
  .menu{width:100%;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:14px}
  .menu-liens{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0 18px}
  .menu-actions{display:flex;justify-content:center;align-items:center;gap:12px}
  .pied{padding:22px 16px;justify-content:center;text-align:center}
  .pied-gauche,.pied-droite{flex:1 1 100%;text-align:center;display:flex;justify-content:center}
  .heros{padding-top:40px}
  .heros-arche{flex:1 1 100%;max-width:340px;margin:0 auto}
  .heros-pilule{flex:1 1 100%;max-width:260px;margin:40px auto 0}
  .heros-arche .photo{height:400px}
  .grille-cartes{gap:40px 24px}
  .slider-cartes .carte-slide{flex:0 0 78%}
  .slider-prec{left:-4px}
  .slider-suiv{right:-4px}
}