/* =========================================================
   dysetdon.fr — feuille de style commune (version pages séparées)
   Couleurs d'origine : orange #F39502 / footer #F29400 / fond #E0E0E0
   conteneur blanc / texte #666 / liens #0000CC / beige #EADCAE / Verdana
   ========================================================= */
:root{
  --orange:#F39502;
  --orange-d:#F29400;
  --bg:#E0E0E0;
  --white:#FFFFFF;
  --text:#666666;
  --gray-t:#757575;
  --beige:#EADCAE;
  --navhover:#EAEAEA;
  --link:#0000CC;
  --border:#CCCCCC;
  --nav-w:240px;
  --t:.3s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--orange) #b4b4b4}
body{
  font:100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-color:var(--bg);
  color:var(--text);
  margin:0;padding:0;
}
::-webkit-scrollbar{width:14px}
::-webkit-scrollbar-track{background:#b4b4b4;border-radius:5px}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:5px}

a{color:var(--link)}
a:hover,a:active{color:var(--orange)}
img{max-width:100%;height:auto;border:0}
[id]{scroll-margin-top:90px}

/* ---- conteneur (carte blanche centrée) ---- */
.container{
  width:min(1080px,96%);
  background:var(--white);
  margin:10px auto;
  border:1px solid var(--border);
  border-radius:.5em;
  box-shadow:10px 16px 12px #bbb;
  overflow:hidden;
  position:relative;
}

/* ---- en-tête orange (+ barre mobile avec bouton accordéon) ---- */
.site-header{
  /*position:relative;*/
  position:sticky;top:0;
  background:var(--orange) url(../images/headerimage.png) no-repeat 100% 0%;
  background-origin:padding-box;
  background-size:165px 67px;
  min-height:94px;
  padding:10px 18px;
  z-index:30;
}

.header-bar{display:none;align-items:center;gap:12px} /* masquée sur grand écran : utile seulement en mobile (bouton accordéon) */
.burger{
  display:none;
  width:46px;height:46px;flex:0 0 auto;
  border:0;background:rgba(255,255,255,.18);border-radius:8px;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;position:relative;transition:transform var(--t),opacity var(--t)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform var(--t),opacity var(--t)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
body.nav-open .burger span{transform:rotate(45deg)}
body.nav-open .burger span::before{transform:rotate(90deg);top:0}
body.nav-open .burger span::after{opacity:0}

.brand{font-weight:bold;color:#000;font-size:1.15rem;letter-spacing:.3px;text-decoration:none}
.brand:hover{color:#222}
.tagline{color:#000;font-size:.78rem;font-weight:bold;line-height:1.5;margin:6px 0 0;max-width:760px}
.tagline a{color:#fff}
.tagline a:hover{color:#222}

/* ---- mise en page : nav à gauche + contenu ---- */
.layout{display:flex;align-items:flex-start}

.sidebar{width:var(--nav-w);flex:0 0 auto;padding:14px 8px 14px 12px;position:sticky;top:10px}
.nav{list-style:none;margin:0 0 14px;padding:0}
.nav li{margin:0 0 3px}
.nav a{
  display:block;padding:7px 8px 7px 15px;
  text-decoration:none;font-weight:bold;font-size:.82rem;
  background:var(--orange);color:#fff;border-radius:3px;
  transition:background var(--t),color var(--t);
}
.nav a:hover,.nav a:focus{background:var(--navhover);color:var(--orange);outline:none}
.nav li.active a{background:#fff;color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.reading-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  margin-top:4px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;
  background:#faf8f3;color:var(--text);font:inherit;font-size:.78rem;cursor:pointer;
}
.reading-toggle:hover{background:#f2efe7}
.switch{width:34px;height:18px;border-radius:999px;background:#cfc9bd;position:relative;flex:0 0 auto;transition:background var(--t)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--t)}
body.reading .switch{background:var(--orange)}
body.reading .switch::after{transform:translateX(16px)}

/* ---- contenu ---- */
.content{flex:1 1 auto;min-width:0;padding:12px 22px 24px;min-height:560px;animation:fade .4s ease both;overflow-wrap:break-word}
.content a{overflow-wrap:anywhere} /* coupe les URL très longues au lieu de déborder à droite */
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.content h1{
  color:var(--orange);font-weight:bolder;font-size:1.5rem;text-align:center;
  margin:6px 0 18px;padding:0 10px;
}
.content h2{font-size:1rem;color:var(--text);font-weight:bold;margin:0 0 12px;padding:0 10px}
.content h2.intro{color:var(--gray-t);font-weight:normal;text-align:justify;font-size:.9rem;line-height:1.6}
.content h3{color:#000;font-size:.95rem;margin:0 0 6px;padding:0 10px}
.content p{font-size:.9rem;text-align:justify;line-height:1.6;margin:0 0 14px;padding:0 10px}
.content .center,.content p.center,.content h2.center{text-align:center}
.disclaimer{color:var(--gray-t);font-size:.82rem;text-align:justify;line-height:1.6;margin:0 0 16px;padding:0 10px}
.dys-celeb{font-style:normal}
.dys-celeb em{color:var(--text)}

body.reading .content p,
body.reading .content li{line-height:2;letter-spacing:.4px;word-spacing:2px}

/* figures (images anciennement dans la barre latérale) */
.figure{float:none;margin:0 0 14px 18px;text-align:center;border-radius:8px;padding:12px}
.figure img{border-radius:4px}
.figure.plain{background:transparent;padding:0}
.figure-stack img{margin:0 0 14px}

/* listes à puces (mark.png) */
.marklist{list-style:none;margin:0 0 14px;padding:0 10px}
.marklist li{position:relative;padding:0 0 12px 22px;font-size:.9rem;text-align:justify;line-height:1.6}
.marklist li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:url(../images/mark.png) no-repeat center/contain}
.note-tools{color:var(--orange);font-weight:bold}
.italic{font-style:italic}

/* blocs témoignages */
.tem{border-left:3px solid var(--orange);background:#fbfaf7;border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 16px;overflow:hidden} /* overflow:hidden -> le bloc englobe l'image flottée */
.tem p{padding:0;margin:0 0 10px}
.tem p:last-child{margin-bottom:0}
.tem .sig{font-weight:bold;color:#000}
.stage{display:inline-block;font-weight:bold;color:var(--orange);margin-bottom:6px}

/* images réparties "en lettrine" : flottées à gauche, le texte s'enroule autour */
.illus{float:left;width:200px;max-width:42%;height:auto;margin:2px 16px 8px 0;border-radius:6px}

audio{width:100%;max-width:420px;margin:6px 10px}
.assoc{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;margin:6px 0 0}

/* ---- footer ---- */
.site-footer{background:var(--orange-d);text-align:center;padding:6px 0;clear:both}
.site-footer img{vertical-align:middle}

/* 2ème footer — uniquement sur contact.html */
.footer-dys{background:#592d91;color:#fff;padding:14px 22px 0;font-size:.9rem;line-height:1.6;clear:both}
.footer-dys a{color:#fff;text-decoration:none}
.footer-dys a:hover{text-decoration:underline}
.footer-dys-inner{margin:0 auto;display:grid;gap:0;grid-template-columns:5fr 1fr}
.footer-dys-about{padding-right:10px}
/* logo en lettrine : flotté à droite, le texte s'enroule à sa gauche */
.footer-dys-logo{float:right;width:130px;max-width:42%;margin:0 0 10px 22px}
.footer-dys-logo img{display:block;width:100%;height:auto}

/* barre verticale séparatrice, pleine hauteur (masquée en écran étroit) */
.footer-dys .footer-dys-col{border-left:3px solid #0C71C3;padding-left:20px}
.footer-dys h3{color:#fff;font-size:1rem;font-weight:bold;margin:0 0 12px;padding:0}
.footer-dys .tagline-dys{font-size:1.15rem;font-weight:bold;margin:0 0 12px;padding:0;max-width:none}
.footer-dys p{padding:0;margin:0 0 12px;max-width:none;text-align:left}
.footer-dys ul{list-style:none;margin:0;padding:0}
.footer-dys li{margin:0 0 8px}

/* ---- retour en haut ---- */
#scrolltop{position:fixed;right:24px;bottom:24px;width:50px;height:50px;border:0;background:none;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--t);z-index:60}
#scrolltop.show{opacity:1;pointer-events:auto}
#scrolltop img{width:50px}

/* =========================================================
   RESPONSIVE : le menu devient un accordéon en haut à gauche
   ========================================================= */
@media (max-width:820px){
  .container{width:100%;margin:0;border-radius:0;box-shadow:none}
  .site-header{position:sticky;top:0;background-size:165px 67px} /* logo conservé en haut à droite, à 50% (220x90 -> 110x45) */
  .header-bar{display:flex}
  .burger{display:inline-flex}
  .tagline{font-size:.72rem;margin-top:8px}

  .layout{flex-direction:column}
  .sidebar{position:static;width:100%;padding:0;max-height:0;overflow:hidden;transition:max-height var(--t);background:#fff}
  body.nav-open .sidebar{max-height:760px;overflow:auto;border-bottom:2px solid var(--orange)}
  .nav{margin:0;padding:8px}
  .nav a{font-size:.9rem;padding:11px 14px}
  .nav li{margin-bottom:5px}
  .reading-toggle{margin:0 8px 10px}

  .content{padding:16px 16px 24px;min-height:auto;width:100%}
  .figure{float:none;width:auto;margin:0 auto 18px}
  .figure-stack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;background:transparent;padding:0}
  .figure-stack img{width:160px;margin:0}
  /* 2ème footer : colonnes empilées */
  .footer-dys-inner{grid-template-columns:1fr;gap:22px}
  .footer-dys-about{padding-right:0}
  .footer-dys .footer-dys-col{border-left:0;padding-left:0;border-top:3px solid #0C71C3;padding-top:18px}
  /* écran étroit : logo en haut à gauche, au-dessus du texte */
  .footer-dys-logo{float:none;margin:0 0 12px; max-width:180px}
}
@media (max-width:480px){ .content h1{font-size:1.25rem} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.001s!important;scroll-behavior:auto!important} }