/* ==========================================================================
   RAFAD — Feuille de style du palier 1 (site de sept pages)
   Palette issue du logo : ocre #CE7B10, sable #EFD6B5, noir.
   Sobriété numérique : aucune police distante, aucun script tiers.
   ========================================================================== */

:root{
  --ocre:#CE7B10;
  --ocre-fonce:#8F5406;
  --sable:#EFD6B5;
  --creme:#FAF4EA;
  --noir:#000000;
  --encre:#33302B;
  --gris:#6B665E;
  --trait:#DCD2C2;
  --blanc:#FFFFFF;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --page:1120px;
  --texte:34rem;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  overflow-wrap:break-word;
}

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

a{color:var(--ocre-fonce);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--noir)}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif);color:var(--noir);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.04}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.14}
h3{font-size:1.24rem;line-height:1.25}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:700;letter-spacing:.01em}
p{margin:0 0 1em}
p,li{max-width:var(--texte)}
.large p,.large li{max-width:none}

.wrap{width:min(var(--page),calc(100% - 2.5rem));margin-inline:auto}
.lede{font-size:1.16rem;color:var(--encre)}
.gris{color:var(--gris)}
.petit{font-size:.9rem;line-height:1.55}

/* Repère de section : arc repris du logo ------------------------------------ */
.repere{
  font-family:var(--sans);font-size:.83rem;font-weight:700;color:var(--ocre-fonce);
  letter-spacing:.02em;display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;
}
.repere::before{
  content:"";width:26px;height:13px;flex:none;
  border:3px solid var(--ocre);border-bottom:0;
  border-radius:26px 26px 0 0;
}

/* En-tête ------------------------------------------------------------------ */
.site-tete{border-bottom:1px solid var(--trait);background:var(--blanc);position:sticky;top:0;z-index:20}
.tete-int{display:flex;align-items:center;gap:1.5rem;padding:.7rem 0;justify-content:space-between}
.marque img{width:132px}
.nav{font-size:.94rem}
.nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav a{color:var(--encre);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ocre-fonce);text-decoration:underline}
.nav .bouton{color:var(--blanc)}

.bouton{
  display:inline-block;background:var(--ocre);color:var(--blanc);
  padding:.72rem 1.15rem;font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid var(--ocre);
}
.bouton:hover{background:var(--ocre-fonce);border-color:var(--ocre-fonce);color:var(--blanc)}
.bouton.creux{background:transparent;color:var(--ocre-fonce)}
.bouton.creux:hover{background:var(--ocre);color:var(--blanc)}
.boutons{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* Sections ----------------------------------------------------------------- */
section{padding:4.2rem 0}
section.serre{padding:3rem 0}
.sable{background:var(--creme)}
.bordee{border-top:1px solid var(--trait)}
.tete-section{margin-bottom:2.4rem}
.tete-section p{max-width:44rem;color:var(--gris);margin-top:.8rem}

/* Ouverture ---------------------------------------------------------------- */
.ouverture{background:var(--creme);border-bottom:1px solid var(--trait);padding:4.5rem 0 4rem}
.ouverture h1{max-width:13ch}
.ouverture .signature{
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--ocre-fonce);
  margin:1.4rem 0 1.2rem;max-width:26rem;
}
.ouverture .socle{border-top:1px solid var(--trait);margin-top:3rem;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem}
.ouverture .socle div{font-size:.92rem;color:var(--gris);max-width:15rem}
.ouverture .socle strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--noir);font-weight:600}

.titre-page{background:var(--creme);border-bottom:1px solid var(--trait);padding:3.2rem 0 2.8rem}
.titre-page h1{font-size:clamp(2.1rem,4.6vw,3.2rem);max-width:20ch}
.titre-page p{margin-top:1.1rem;font-size:1.12rem;color:var(--encre)}

/* Énoncé fort -------------------------------------------------------------- */
.enonce{border-top:3px solid var(--ocre);padding-top:2rem}
.enonce h2{max-width:24ch;font-size:clamp(1.9rem,4vw,3rem)}
.enonce .apres{margin-top:1.6rem;max-width:36rem}

/* Grilles ------------------------------------------------------------------ */
.colonnes{display:grid;gap:2.6rem}
@media (min-width:860px){
  .colonnes.deux{grid-template-columns:1fr 1fr}
  .colonnes.texte-cote{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3.4rem}
}

.liste-fiches{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);margin:0;padding:0;list-style:none}
@media (min-width:700px){.liste-fiches{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.liste-fiches.trois{grid-template-columns:repeat(3,1fr)}}
.liste-fiches > li{background:var(--blanc);padding:1.7rem 1.6rem}
.liste-fiches h3{margin-bottom:.55rem}
.liste-fiches p{font-size:.97rem;color:var(--gris);margin:0}
.liste-fiches .num{font-family:var(--serif);color:var(--ocre);font-size:1.05rem;display:block;margin-bottom:.5rem}

/* Chronologie -------------------------------------------------------------- */
.chrono{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.chrono > li{border-bottom:1px solid var(--trait);padding:1.5rem 0;display:grid;gap:.4rem 2rem}
@media (min-width:760px){.chrono > li{grid-template-columns:8.5rem minmax(0,1fr)}}
.chrono .date{font-family:var(--serif);font-size:1.45rem;color:var(--ocre);line-height:1.2}
.chrono h3{margin-bottom:.35rem}
.chrono p{margin:0;color:var(--gris)}
.chrono .source{font-size:.83rem;color:var(--gris);margin-top:.5rem;font-style:italic}

/* Schémas ------------------------------------------------------------------ */
.schema{background:var(--blanc);border:1px solid var(--trait);padding:1.4rem}
.sable .schema{background:var(--blanc)}
.schema svg{width:100%;height:auto;display:block}
.schema figcaption{font-size:.86rem;color:var(--gris);margin-top:1rem;border-top:1px solid var(--trait);padding-top:.8rem}

/* Encadrés ----------------------------------------------------------------- */
.doctrine{border-left:3px solid var(--ocre);padding:.2rem 0 .2rem 1.4rem;font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:var(--noir)}
.note{background:var(--creme);border:1px solid var(--trait);padding:1.3rem 1.4rem;font-size:.95rem}
.note p:last-child{margin-bottom:0}
.temoignage{border:1px solid var(--trait);border-top:3px solid var(--sable);padding:1.4rem;font-size:.95rem}
.temoignage .mention{display:block;font-weight:700;font-size:.82rem;color:var(--ocre-fonce);margin-bottom:.6rem}
.a-completer{background:var(--sable);padding:0 .3em;font-weight:700;color:var(--ocre-fonce)}

/* Appel à contribuer -------------------------------------------------------- */
.porte{background:var(--noir);color:#EDE8E0;padding:3.4rem 0}
.porte h2{color:var(--blanc);max-width:22ch}
.porte p{color:#C8C2B8;max-width:38rem}
.porte a.bouton{background:var(--ocre);border-color:var(--ocre);color:var(--blanc)}
.porte a.bouton.creux{background:transparent;color:var(--sable);border-color:#5A544B}
.porte a.bouton.creux:hover{background:var(--sable);color:var(--noir);border-color:var(--sable)}

/* Formulaires --------------------------------------------------------------- */
.formulaire{border:1px solid var(--trait);padding:1.7rem 1.6rem;background:var(--blanc)}
.formulaire h3{margin-bottom:.5rem}
.formulaire > p{color:var(--gris);font-size:.96rem}
.champ{margin:1rem 0}
.champ label{display:block;font-size:.9rem;font-weight:700;margin-bottom:.35rem}
.champ input,.champ textarea,.champ select{
  width:100%;padding:.68rem .7rem;border:1px solid var(--trait);background:var(--blanc);
  font:inherit;font-size:.96rem;color:var(--encre);border-radius:0;
}
.champ textarea{min-height:8rem;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--ocre)}
.consentement{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;margin:1.2rem 0}
.consentement input{margin-top:.25rem;flex:none;width:auto}

/* Pied de page -------------------------------------------------------------- */
.site-pied{border-top:1px solid var(--trait);padding:3rem 0 2rem;font-size:.94rem}
.pied-grille{display:grid;gap:2.2rem;margin-bottom:2.4rem}
@media (min-width:780px){.pied-grille{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.site-pied h4{margin-bottom:.8rem}
.site-pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-pied a{color:var(--encre);text-decoration:none}
.site-pied a:hover{color:var(--ocre-fonce);text-decoration:underline}
.site-pied .partenaire{font-size:.88rem;color:var(--gris)}
.pied-bas{border-top:1px solid var(--trait);padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;font-size:.85rem;color:var(--gris)}

/* Textes longs (mentions légales, confidentialité) -------------------------- */
.texte-long h2{margin-top:2.4rem;font-size:1.5rem}
.texte-long h3{margin-top:1.6rem}
.texte-long ul{padding-left:1.2rem}
.texte-long li{margin-bottom:.4rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:640px){
  body{font-size:16px}
  section{padding:3.1rem 0}
  .nav ul{gap:.85rem;font-size:.9rem}
  .marque img{width:112px}
}

/* Schémas construits en HTML (réactifs, lisibles sur mobile et à l'impression) */
.flux{display:grid;gap:.9rem;margin:0}
@media (min-width:820px){.flux.trois{grid-template-columns:repeat(3,1fr)}}
.etape{border:1px solid var(--trait);background:var(--blanc);padding:1.2rem 1.1rem;position:relative}
.etape .rang{font-family:var(--serif);color:var(--ocre);font-size:1rem;display:block;margin-bottom:.45rem}
.etape h3{font-size:1.06rem;margin-bottom:.4rem}
.etape p{font-size:.94rem;color:var(--gris);margin:0;max-width:none}
.etape::after{
  content:"";position:absolute;right:-.72rem;top:50%;width:.9rem;height:.9rem;
  border-top:2px solid var(--ocre);border-right:2px solid var(--ocre);
  transform:translateY(-50%) rotate(45deg);background:var(--blanc);display:none;
}
@media (min-width:820px){.flux.trois .etape:not(:last-child)::after{display:block}}
.flux-socle{border-left:3px solid var(--ocre);padding-left:1.2rem;margin-top:1.3rem;font-size:.97rem}
.flux-socle strong{color:var(--noir)}

.cycle{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);margin:0;padding:0;list-style:none}
@media (min-width:640px){.cycle{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cycle{grid-template-columns:repeat(4,1fr)}}
.cycle li{background:var(--blanc);padding:1.15rem 1.1rem}
.cycle .mot{display:block;font-family:var(--serif);font-size:1.14rem;color:var(--noir);margin-bottom:.35rem}
.cycle .mot span{color:var(--ocre)}
.cycle p{font-size:.92rem;color:var(--gris);margin:0;max-width:none}
.bandeau-modele{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-family:var(--serif);font-size:1.1rem;color:var(--noir);margin-bottom:1.6rem}
.bandeau-modele span{background:var(--sable);padding:.3rem .8rem}
.bandeau-modele em{color:var(--ocre);font-style:normal}