/* PDDM — reproduction du design actuel de droledemonde.com
   Couleurs et corps de police relevés sur le site en production. */
:root{
  --ink:#202020; --ink-ca:#242323; --rouge:#910613; --creme:#FFEADB;
  --rose:#AC5A62; --blanc:#fff; --gris:#999997;
  --col:980px; --display:"Roboto",system-ui,sans-serif; --corps:"Montserrat",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--ink);font:400 16px/1.3 var(--corps)}
img{max-width:100%;display:block}
/* Les images sont enveloppees dans <picture> au build pour servir AVIF / WebP ;
   display:contents retire l'enveloppe de l'arbre de rendu. La seconde regle est
   indispensable : sans elle, les <source> deviennent eux aussi des elements de
   grille ou de flex et decalent la mise en page. */
picture{display:contents}
picture > source{display:none}
a{color:inherit}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blanc);color:var(--ink);padding:12px 20px;z-index:100}
.skip-link:focus{left:0}
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.col{width:min(100% - 40px,var(--col));margin-inline:auto}

/* en-tete */
.entete{background:var(--ink);color:var(--blanc)}
.entete__in{display:flex;align-items:center;gap:24px;min-height:155px}
.logos{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.logos img{width:76px;height:110px;object-fit:contain}
.nav{margin-left:auto}
.nav ul{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
.nav a{font:400 18px/1.2 var(--display);color:var(--blanc);text-decoration:none;padding:6px 2px;display:inline-block;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current=page]{color:var(--rose);border-bottom-color:var(--rose)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:var(--blanc);width:48px;height:48px;border-radius:4px;cursor:pointer;margin-left:auto}
.menu-btn span{display:block;width:22px;height:2px;background:var(--blanc);margin:4px auto}

/* heros + mission superposee (une seule section sur le site actuel) */
.heros{position:relative;background:var(--blanc);isolation:isolate}
.heros__img{width:100%;height:517px;object-fit:cover;opacity:.8}
.heros__texte{position:absolute;inset:0;color:var(--blanc)}
.heros__titre{position:absolute;left:0;right:0;top:28px;text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.heros__titre span{display:block}
.heros__l1{font:700 46px/1.1 var(--display)}
.heros__l2{font:italic 700 72px/1.05 var(--display)}
.mission{position:absolute;left:max(20px,calc(50% - var(--col)/2 + 40px));top:230px;width:min(479px,calc(100% - 40px))}
.mission h2{font:700 30px/1.2 var(--display);margin:0 0 18px;letter-spacing:.3px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.mission p{font:400 16px/1.3 var(--corps);margin:0;text-shadow:0 1px 10px rgba(0,0,0,.8)}

/* direction artistique */
.bio{background:var(--blanc);padding:60px 0}
.bio__in{display:grid;grid-template-columns:568px 1fr;gap:40px;align-items:start}
.bio__img{width:568px;height:827px;object-fit:cover}
.bio h2{font:700 29px/1.2 var(--display);margin:0}
.bio .role{font:700 29px/1.2 var(--display);margin:6px 0 24px}
.bio p{font:400 16px/1.3 var(--corps);margin:0 0 18px}

/* actualites */
.actus{background:var(--blanc);padding:40px 0 60px;text-align:center}
.actus h2{font:700 45px/1.2 var(--display);color:var(--ink-ca);margin:0 0 40px}
.actus__grille{display:grid;grid-template-columns:repeat(3,292px);gap:32px;justify-content:center}
.carte-actu{position:relative;width:292px;height:292px;overflow:hidden;display:block;text-decoration:none}
.carte-actu img{width:100%;height:100%;object-fit:cover}
.carte-actu::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.carte-actu span{position:absolute;inset:0;display:grid;place-items:center;padding:20px;z-index:1;
  color:var(--blanc);font:700 26px/1.15 var(--display);text-align:center}
.carte-actu:hover::after,.carte-actu:focus-visible::after{background:rgba(0,0,0,.4)}

/* notre histoire */
.histoire{background:var(--rouge);color:var(--blanc);padding:66px 0 60px}
.histoire h2{font:700 56px/1.15 var(--display);text-align:center;margin:0 0 50px}
.histoire__cols{display:grid;grid-template-columns:446px 452px;gap:45px;justify-content:center}
.histoire p{font:400 16px/1.4 var(--corps);margin:0 0 18px}

/* conseil d'administration */
.conseil{background:var(--ink-ca);color:var(--blanc);padding:52px 0 60px}
.conseil h2{font:700 60px/1.15 var(--display);text-align:center;margin:0 0 50px}
.conseil__grille{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:48px 80px;justify-content:center;text-align:center}
.membre__nom{font:700 19px/1.3 var(--display);margin:0 0 10px}
.membre img{width:100%;height:245px;object-fit:cover;margin:0 0 12px}
.membre__role{font:400 17px/1.3 var(--corps);color:var(--creme);margin:0}
/* Le site actuel affiche la 2e rangee en blanc : incoherence reproduite telle quelle. */
.membre:nth-child(n+4) .membre__role{color:var(--blanc)}

/* pied de page */
.pied{background:var(--ink);color:var(--blanc);padding:40px 0}
.pied__in{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pied h2{font:700 26px/1.2 var(--display);margin:0 0 24px}
.pied dl{margin:0;font:400 14px/1.9 var(--corps)}
.pied dt{display:inline;font-weight:700}
.pied dd{display:inline;margin:0}
.pied dd::after{content:"";display:block}
.pied__col--c{text-align:center}
.pied__col--c h3,.pied__col--d h3{font:700 16px/1.3 var(--display);margin:0 0 14px}
.pied__col--d{text-align:center}
.pied__col--d h3{font-size:23px}
.infolettre{display:flex;gap:8px;align-items:center;background:rgba(229,235,250,.72);padding:8px;border-radius:2px}
.infolettre input{flex:1;min-width:0;border:0;background:transparent;padding:12px;font:400 14px var(--corps);color:var(--ink)}
.btn-blanc{display:inline-block;background:var(--blanc);color:var(--ink);border:0;text-decoration:none;
  font:400 16px/1 var(--corps);padding:12px 24px;cursor:pointer}
.btn-blanc--sabonner{color:var(--rouge);font:700 14px/1 var(--display)}
.btn-blanc--risee{color:var(--rose);font:400 13px/1 var(--corps)}
.pied__risee{margin-top:36px}
.copyright{background:var(--rouge);color:var(--ink);text-align:center;padding:14px 0;font:400 13px/1.3 var(--corps)}

/* pages interieures */
.page-sombre{background:var(--ink);color:var(--blanc);padding:40px 0 60px}
.page-sombre h1{font:700 60px/1.1 var(--display);margin:0 0 30px}
.fiche{display:grid;grid-template-columns:469px 1fr;gap:50px;align-items:start}
.fiche__credits dl{margin:0}
.fiche__credits dt{font:700 14px/1.4 var(--display);margin-top:20px;text-transform:uppercase}
.fiche__credits dd{margin:4px 0 0;font:400 14px/1.4 var(--corps)}
.synopsis{background:var(--blanc);color:var(--ink);padding:60px 0}
.synopsis p{font:400 16px/1.6 var(--corps);margin:0 0 24px;max-width:767px}
.distribution{background:var(--ink);color:var(--blanc);padding:40px 0 60px}
.distribution h2{font:700 43px/1.2 var(--display);text-align:center;margin:0 0 40px}
.distribution__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:40px}
.interprete img{width:100%;height:333px;object-fit:cover;margin:0 0 16px}
.interprete h3{font:700 26px/1.2 var(--display);margin:0 0 6px}
.interprete .perso{font:400 15px/1.4 var(--corps);margin:0 0 14px;color:var(--creme)}
.interprete p{font:400 12px/1.5 var(--corps);margin:0}
.galerie{background:var(--ink);padding:0 0 60px}
.galerie__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.galerie img{width:100%;height:100%;object-fit:cover}
.note{color:var(--gris);font:400 13px/1.6 var(--corps);margin:24px 0 0}
.formulaire{display:grid;gap:14px;max-width:460px}
.formulaire label{font:400 14px/1.4 var(--corps)}
.formulaire input,.formulaire textarea{width:100%;border:0;padding:8px;font:400 14px var(--corps);color:var(--ink);background:var(--blanc)}
.formulaire textarea{min-height:120px}
.page-claire{background:var(--blanc);color:var(--ink);padding:60px 0}
.page-claire h1{font:700 56px/1.15 var(--display);text-align:center;margin:0 0 30px}
.page-claire h2{font:700 38px/1.2 var(--display);text-align:center;margin:50px 0 30px}
.partenaires__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px;text-align:center}
.partenaire img{width:100%;height:220px;object-fit:contain}
.partenaire h3{font:700 20px/1.3 var(--display);margin:16px 0 4px}
.partenaire p{font:400 16px/1.4 var(--corps);margin:0}
.disciplines{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;margin:30px 0}
.disciplines h3{font:700 14px/1.3 var(--corps);margin:0 0 12px}
.disciplines p{font:400 14px/1.5 var(--corps);margin:0 0 14px}
.objectifs{columns:2;gap:40px;font:400 14px/1.5 var(--corps)}
.objectifs li{margin:0 0 10px;break-inside:avoid}
.ateliers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;list-style:none;padding:0}
.ateliers li{display:flex;gap:16px;align-items:baseline}
.ateliers b{font:700 39px/1 var(--corps);color:var(--rouge)}
.ateliers span{font:700 18px/1.3 var(--corps);color:var(--rouge)}
blockquote{margin:0;font:400 23px/1.5 var(--corps)}
blockquote footer{margin-top:16px;font-size:.8em}

@media (max-width:1024px){
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--ink);padding:0 20px;display:none;z-index:20}
  .nav[data-ouvert]{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .entete__in{position:relative;min-height:110px}
  .menu-btn{display:block}
  .heros__l2{font-size:52px}
  .heros__l1{font-size:34px}
  .bio__in{grid-template-columns:1fr}
  .bio__img{width:100%;height:auto}
  .fiche{grid-template-columns:1fr}
  .histoire__cols{grid-template-columns:1fr;max-width:540px;margin-inline:auto}
}
@media (max-width:860px){
  .actus__grille{grid-template-columns:292px;justify-content:center}
  .conseil__grille{grid-template-columns:repeat(2,minmax(0,200px))}
  .pied__in{grid-template-columns:1fr;text-align:center}
  .pied dl{text-align:center}
  .objectifs{columns:1}
}
@media (max-width:620px){
  .heros__img{height:420px}
  .heros__l2{font-size:38px}
  .heros__l1{font-size:26px}
  .mission{position:static;width:auto;padding:30px 20px;background:var(--ink);color:var(--blanc)}
  .mission h2,.mission p{text-shadow:none}
  .heros__texte{position:static}
  .heros__titre{position:absolute;top:140px}
  .conseil__grille{grid-template-columns:minmax(0,220px)}
  .page-sombre h1,.page-claire h1{font-size:34px}
  .distribution h2,.histoire h2,.conseil h2,.actus h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}