/* ==========================================================================
   DERETA — Tapisserie Décoration — feuille de style unique (refonte 2026)
   Aucune dépendance externe : polices auto-hébergées, pas de framework.
   Pour modifier les couleurs / largeurs : voir les variables ci-dessous.
   ========================================================================== */

@font-face{font-family:"Questrial";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/questrial-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/mulish-latin-300-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/mulish-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --nuit:#010317;               /* bleu nuit du fond (visible si la photo ne charge pas) */
  --noir:#000;
  --blanc:#fff;
  --panneau:rgba(0,0,0,.6);     /* panneau de texte translucide */
  --ombre:2px 2px 1px rgba(0,0,0,.75);
  --largeur-menu:240px;
  --largeur-colonne:400px;
  --titre:"Questrial","Century Gothic","Trebuchet MS",system-ui,sans-serif;
  --texte:"Mulish","Segoe UI","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--nuit);color:var(--blanc);
  font:300 .875rem/1.55 var(--texte);-webkit-font-smoothing:antialiased;hyphens:auto;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1.2em}
:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #000}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:8px;top:-60px;z-index:100;padding:10px 14px;background:#fff;color:#000;font:400 1rem var(--titre);text-decoration:none}
.lien-evitement:focus{top:8px}

/* ---------- Photo de fond plein écran, fixe, propre à chaque page ---------- */
.fond{position:fixed;inset:0;z-index:-1;background:var(--nuit) no-repeat left top / cover}
.p-accueil .fond,.p-legal .fond{background-image:url("../img/bg/accueil.webp");background-position:center center}
.p-sieges .fond{background-image:url("../img/bg/sieges.webp")}
.p-stores-int .fond{background-image:url("../img/bg/stores-interieurs.webp")}
.p-stores-ext .fond{background-image:url("../img/bg/stores-exterieurs.webp")}
.p-rideaux .fond{background-image:url("../img/bg/rideaux.webp")}
.p-literie .fond{background-image:url("../img/bg/literie.webp")}
.p-decoration .fond{background-image:url("../img/bg/decoration.webp")}
.p-boutique .fond{background-image:url("../img/bg/boutique.webp")}
.p-cours .fond{background-image:url("../img/bg/cours.webp")}
.p-contact .fond{background-image:url("../img/bg/contact.webp")}
.p-historique .fond{background-image:url("../img/bg/historique.webp")}
.p-marques .fond{background-image:url("../img/bg/marques.webp")}

/* ---------- Structure : menu à gauche, colonne de texte à côté ---------- */
.cadre{display:block}
@media (min-width:1000px){
  .cadre{display:grid;grid-template-columns:var(--largeur-menu) minmax(300px,var(--largeur-colonne)) 1fr;align-items:start;min-height:100vh}
  .p-legal .cadre{grid-template-columns:var(--largeur-menu) minmax(300px,820px) 1fr}
  .p-accueil .cadre{grid-template-columns:var(--largeur-menu) 1fr}
  /* Menu de gauche fixe au défilement (défile en interne si l'écran est trop bas) */
  .menu{position:sticky;top:0;max-height:100vh;overflow-y:auto;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
}

/* ---------- Barre mobile (cachée sur grand écran) ---------- */
.barre{display:none}
@media (max-width:999.98px){
  .barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;
    position:sticky;top:0;z-index:50;background:#000 url("../img/ui/fond-barre.png") repeat-x left top;box-shadow:0 2px 8px rgba(0,0,0,.6)}
  .barre-logo{display:block;line-height:0}
  .barre-logo img{width:150px;height:auto}
  .barre-droite{display:flex;align-items:center;gap:14px}
  .barre-langue{display:block;line-height:0}
  .barre-langue img{width:29px;height:29px}
  .barre-bouton{font:400 1.05rem var(--titre);color:#fff;background:transparent;border:1px solid rgba(255,255,255,.7);padding:8px 14px;cursor:pointer}
  .barre-bouton[aria-expanded="true"]{background:#fff;color:#000}
}

/* ---------- Menu latéral ---------- */
.menu{width:var(--largeur-menu);padding:20px;background:var(--noir) url("../img/ui/fond-menu.png") repeat-y left top;animation:entree-gauche .8s both}
.menu-logo{display:block;max-width:200px;margin:10px 30px 0 0;padding-bottom:40px;line-height:0}
.menu-logo img{width:100%;max-width:200px;height:auto;display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:block;margin-top:10px;padding:4px 0 3px 30px;text-align:right;text-decoration:none;color:#fff;
  font:700 1.3rem/1.2 var(--titre);text-shadow:var(--ombre);
  background-repeat:no-repeat;background-position:left center;transition:padding .3s linear,background-color .3s linear,color .3s linear}
.menu li a:hover,.menu li a:focus-visible,.menu li a[aria-current="page"]{padding-left:40px;color:#d9d9d9;background-color:rgba(0,0,0,.85)}
.m-accueil{background-image:url("../img/ui/picto-accueil.png")}
.m-historique{background-image:url("../img/ui/picto-historique.png")}
.m-sieges{background-image:url("../img/ui/picto-sieges.png")}
.m-stores-int{background-image:url("../img/ui/picto-stores-interieurs.png")}
.m-stores-ext{background-image:url("../img/ui/picto-stores-exterieurs.png")}
.m-rideaux{background-image:url("../img/ui/picto-rideaux.png")}
.m-literie{background-image:url("../img/ui/picto-literie.png")}
.m-decoration{background-image:url("../img/ui/picto-decoration.png")}
.m-boutique{background-image:url("../img/ui/picto-boutique.png")}
.m-cours{background-image:url("../img/ui/picto-cours.png")}
.m-contact{background-image:url("../img/ui/picto-contact.png")}
.reseaux{display:flex;justify-content:center;align-items:center;gap:16px;margin:24px 0 10px}
.reseaux a{display:block;line-height:0}
.reseaux img{display:block;height:35px;width:auto}
@media (max-width:999.98px){
  .menu{display:none;width:100%;padding:8px 14px 18px}
  .menu-ouvert .menu{display:block;animation:none}
  .menu-logo{display:none}
  .menu li a{text-align:left;padding:10px 0 10px 40px;margin-top:4px;font-size:1.2rem;background-position:6px center}
  .menu li a:hover,.menu li a:focus-visible,.menu li a[aria-current="page"]{padding-left:48px}
}

/* ---------- Sélecteur de langue (grand écran) ---------- */
.langue{position:fixed;top:40px;right:0;z-index:60;width:56px;white-space:nowrap;padding:5px 0;text-align:center;font-size:.6rem;line-height:1.3;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.75);animation:entree-haut .8s both}
.langue a{display:block;text-decoration:none}
.langue img{display:block;width:29px;height:29px;margin:0 auto 2px}
@media (max-width:999.98px){.langue{display:none}}

/* ---------- Colonne de texte ---------- */
.colonne{min-width:0;padding-bottom:20px;background:var(--panneau);text-align:center;animation:entree-haut .8s both}
.titre{display:inline-block;margin:0;padding:0 .2em;background:#fff;color:#000;text-align:left;
  font:400 2rem/1.25 var(--titre);hyphens:manual}
.texte{padding:20px 10px 10px;text-shadow:var(--ombre);text-align:justify}
.texte p:last-child{margin-bottom:0}
.texte a{text-decoration:underline;text-underline-offset:2px}
.deco{display:block;margin:20px auto 0;height:auto}
.deco-droite{margin-left:auto;margin-right:auto}
.sous-titre{display:block;margin:10px 0 0;padding:0 .25em;background:#fff;color:#000;text-align:left;font:400 1.3rem/1.35 var(--titre);hyphens:manual}
.sous-titre.petit{font-size:1.2rem}
.lien-bandeau{display:block;margin:10px 0 0;padding:0 .25em;background:#fff;color:#000;text-align:left;text-decoration:none;font:400 1.2rem/1.35 var(--titre)}
.lien-bandeau:hover,.lien-bandeau:focus-visible{background:#e6e6e6}
.liste{margin:0 0 1.2em;padding:0 10px 0 2.2em;text-align:left;list-style:square;text-shadow:var(--ombre)}
.liste li{margin:0 0 .15em}
.liste a{text-decoration:none}
.liste a:hover,.liste a:focus-visible{text-decoration:underline}
.intitule{margin:10px 0 0;padding:0 10px;text-align:left;text-shadow:var(--ombre)}
.texte .intitule-gras{margin:0 0 .4em;text-align:left}
/* petit picto décoratif centré au-dessus d'une photo (doit passer après .photo img) */
.photo .deco-inline{display:block;width:120px;max-width:100%;height:auto;margin:6px auto 10px;background:none}
.contact p{text-align:left}

/* ---------- Galerie « Quelques réalisations » ---------- */
.realisations{margin-top:10px}
.photo{margin:10px 0 0;padding-bottom:30px;text-align:left}
.photo figcaption{padding:0 8px 4px;text-shadow:var(--ombre)}
.photo img{display:block;width:100%;height:auto;background:rgba(0,0,0,.35)}
.photo a.zoom{display:block;cursor:zoom-in}

/* ---------- Vidéo (chargée au clic : aucun cookie avant) ---------- */
.video{position:relative;width:100%;min-height:300px;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-lancer{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;font:400 1.1rem var(--titre);color:#000;background:#fff;border:0;cursor:pointer}
.video-lancer svg{width:20px;height:20px}
.video-lancer:hover{background:#e6e6e6}
.video a{font-size:.8rem}

/* ---------- Formulaire de contact ---------- */
.formulaire{width:95%;margin:10px auto 0;padding:10px 12px 14px;background:rgba(0,0,0,.2);font-size:.9rem;text-align:left;text-shadow:1px 1px 1px rgba(0,0,0,.75)}
.champ{display:block;margin:0 0 .7rem}
.champ>span{display:block;margin-bottom:3px}
.champ input,.champ textarea{display:block;width:100%;padding:7px 8px;font:400 .95rem var(--texte);color:#000;background:rgba(255,255,255,.93);border:1px solid #000;border-radius:0;text-shadow:none}
.champ textarea{min-height:7.5rem;resize:vertical}
.champ input:focus-visible,.champ textarea:focus-visible{outline:2px solid #fff;box-shadow:0 0 0 4px #000}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire small{display:block;margin:0 0 .8rem}
.envoyer{display:inline-block;padding:10px 26px;font:400 1.1rem var(--titre);color:#000;background:#fff;border:0;cursor:pointer;text-shadow:none}
.envoyer:hover,.envoyer:focus-visible{background:#e6e6e6}
.statut{min-height:1.4em;margin:.8rem 0 0;font-weight:600}

/* ---------- Pied de colonne ---------- */
.pied{margin-top:10px;padding:10px;font-size:.75rem;text-shadow:var(--ombre)}
.pied ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;padding:0;list-style:none}
.pied a{text-decoration:none}
.pied a:hover,.pied a:focus-visible{text-decoration:underline}
.plan{display:none;margin:0 0 12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.25)}
@media (max-width:999.98px){.plan{display:block}}

/* ---------- Page d'accueil ---------- */
.accueil-panneau{padding:10px 20px 20px;background:rgba(89,87,89,.4);animation:entree-gauche .8s both}
.accueil-panneau h1{margin:10px 0 0;padding:0 .2em;background:#fff;color:#000;text-align:left;font:400 2rem/1.25 var(--titre);hyphens:manual}
.accueil-panneau p{margin:10px 0 0;padding:0 20px 30px 10px;text-align:justify;text-shadow:var(--ombre)}
.tuiles{display:none}
@media (min-width:1000px){
  .accueil-panneau{position:fixed;right:0;top:20%;z-index:10;width:min(440px,calc(100vw - var(--largeur-menu)));min-width:250px}
}
@media (max-width:999.98px){
  .tuiles{display:flex;flex-wrap:wrap;justify-content:center;background:#424242 url("../img/ui/fond-barre.png") repeat-x left top}
  .tuiles a{flex:1 1 20%;padding:0;line-height:0}
  .tuiles img{display:block;max-width:110px;width:100%;margin:10px auto}
  .accueil-panneau{margin-top:34vh;border-top:10px solid #000;background:rgba(1,3,23,.6)}
}

/* ---------- Mobile / tablette : le panneau passe sous la photo ---------- */
@media (max-width:999.98px){
  .colonne{width:100%;margin-top:34vh;border-top:10px solid #000;background:rgba(1,3,23,.62);animation:none}
  .titre,.accueil-panneau h1{font-size:1.7rem}
  .texte{padding-top:16px}
}

/* ---------- Agrandissement des photos (<dialog>) ---------- */
.visionneuse{width:100%;max-width:100vw;height:100%;max-height:100vh;margin:0;padding:0;border:0;background:transparent;color:#fff}
.visionneuse[open]{display:flex;align-items:center;justify-content:center}
.visionneuse::backdrop{background:rgba(0,0,0,.93)}
.visionneuse figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:94vw}
.visionneuse img{max-width:94vw;max-height:84vh;width:auto;height:auto;object-fit:contain}
.visionneuse figcaption{margin-top:10px;max-width:80ch;text-align:center;font-size:.95rem}
.visionneuse button{position:absolute;display:grid;place-items:center;width:48px;height:48px;font:400 2rem/1 var(--titre);color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);border-radius:50%;cursor:pointer}
.visionneuse button:hover,.visionneuse button:focus-visible{background:#fff;color:#000}
.v-fermer{top:14px;right:14px}.v-prec{left:12px;top:50%;transform:translateY(-50%)}.v-suiv{right:12px;top:50%;transform:translateY(-50%)}

/* ---------- Page « mentions légales » ---------- */
.legal{padding:20px 16px 10px;text-align:left;text-shadow:var(--ombre)}
.legal h2{margin:1.4em 0 .4em;font:400 1.15rem var(--titre);text-transform:uppercase;letter-spacing:.03em}
.legal p{text-align:justify}

/* ---------- Animations discrètes (désactivées si l'utilisateur le demande) ---------- */
@keyframes entree-gauche{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes entree-haut{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .fond,.menu,.barre,.langue,.tuiles,.visionneuse{display:none!important}
  body{background:#fff;color:#000}.colonne,.accueil-panneau{background:none;position:static;color:#000}
  .texte,.photo figcaption,.liste,.pied{text-shadow:none}
}