/* =========================================================
   HÉLIXSTRAT — feuille de style
   ========================================================= */

/* ---------- 1. Polices (fichiers dans /fonts) ---------- */
@font-face {
  font-family: "Rozha One";
  src: url("../fonts/rozha-one-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Walkway";
  src: url("../fonts/walkway-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Walkway";
  src: url("../fonts/walkway-ultrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* ---------- 2. Couleurs de la charte ---------- */
:root {
  --brun-fonce:   #4d291a;  /* titres */
  --brun:         #693c0f;  /* boutons */
  --brun-moyen:   #825036;
  --sable:        #bda078;  /* couleur primaire, hélice */
  --creme:        #ffe2ae;  /* surlignage baseline */
  --papier:       #fbf9f5;  /* fond (le blanc cassé de l'hélice) */
  --texte:        #3a2a20;

  --police-titre:  "Rozha One", Georgia, serif;
  --police-texte:  "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-slogan: "Walkway", "Roboto", sans-serif;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

/* Hélice : séparateur réutilisé partout */
.helice {
  width: 120px;
  margin: 2rem auto;
}

/* Bouton commun */
.bouton {
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--papier);
  background: var(--brun);
  border: 0;
  border-radius: 2px;
  padding: .85rem 1.6rem;
  cursor: pointer;
  transition: background-color .2s ease;
}
.bouton:hover { background: var(--brun-fonce); }
.bouton:focus-visible { outline: 2px solid var(--sable); outline-offset: 3px; }

/* ---------- 4. Page d'accès ---------- */
.acces {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  /* léger grain de papier, sans image */
  background:
    radial-gradient(ellipse at 50% 35%, #fffdf9 0%, var(--papier) 55%, #f3ede3 100%);
}

.acces__carte {
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.acces__logo {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.acces .helice { width: 90px; margin: 2.25rem auto 2rem; }

.acces__label {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--brun-fonce);
}

.acces__aide {
  margin: .4rem 0 1.4rem;
  font-size: .95rem;
  color: var(--brun-moyen);
}

.acces__ligne {
  display: flex;
  gap: .5rem;
}

.acces__champ {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--sable);
  border-radius: 2px;
  padding: .8rem 1rem;
}
.acces__champ::placeholder { color: #a8957f; }
.acces__champ:focus { outline: none; border-color: var(--brun); box-shadow: 0 0 0 3px rgba(189,160,120,.3); }
.acces__champ[aria-invalid="true"] { border-color: #a0442a; }

.acces__erreur {
  min-height: 1.6em;
  margin: .75rem 0 0;
  font-size: .95rem;
  color: #a0442a;
}

/* petite secousse si le code est faux */
.secousse { animation: secousse .35s ease; }
@keyframes secousse {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (max-width: 420px) {
  .acces__ligne { flex-direction: column; }
}

/* Apparition douce du site */
.site { animation: apparition .6s ease both; }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .secousse, .site { animation: none; }
}

/* ---------- 5. Typographie du site ---------- */
.titre-site {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--brun-fonce);
  margin: 0;
}

.baseline {
  display: inline-block;
  font-family: var(--police-slogan);
  font-weight: 800;          /* Walkway UltraBold */
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--brun-fonce);
  background: var(--creme);
  padding: .1em .45em .15em;
  margin: .6rem 0 0;
}

.slogan {
  font-family: var(--police-slogan);
  font-weight: 700;          /* Walkway Bold */
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--brun-moyen);
}

.texte { max-width: 62ch; margin: 0 auto; }

.surtitre {
  margin: 0 0 .75rem;
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brun-moyen);
}

/* ---------- 6. Bannière ---------- */
.banniere {
  position: relative;
  overflow: hidden;
}

.banniere__image {
  width: 100%;
  aspect-ratio: 2104 / 1098;
  min-height: 460px;
  max-height: 92vh;
  object-fit: cover;
  object-position: center top;
}

/* fondu du bas de la gravure vers la couleur de la page */
.banniere::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  background: linear-gradient(to bottom, rgba(251,249,245,0), var(--papier));
  pointer-events: none;
}

.banniere__titre {
  position: absolute;
  top: 6.5%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 1rem;
}
/* halo couleur papier derrière le titre, pour l'adoucir sur le ciel */
.banniere__titre::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(900px, 110%);
  height: 190%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(251,249,245,.9), rgba(251,249,245,.6) 55%, rgba(251,249,245,0));
}
.banniere__titre { isolation: isolate; }

/* Le titre garde la taille 60 sur un écran standard, et suit la largeur de la gravure */
.banniere .titre-site { font-size: clamp(44px, 4.7vw, 96px); }
.banniere .baseline   { font-size: clamp(19px, 1.875vw, 38px); }

@media (max-width: 700px) {
  .banniere__image { object-position: 30% top; }
  .banniere__titre { top: 2.25rem; }
}

/* ---------- 7. La promesse et les 5 missions ---------- */
.promesse {
  max-width: 1240px;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 3rem;
  text-align: center;
}

.promesse__titre {
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  color: var(--brun-fonce);
}

.promesse__intro {
  max-width: 62ch;
  margin: 1.75rem auto 3rem;
}

.missions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.mission {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2.25rem 1.25rem 2rem;
  background: var(--fond-carte);
  color: var(--texte-carte);
  border-radius: 2px;
}

/* chaque aplat prend une couleur de la charte, du plus foncé au plus clair */
.mission:nth-child(1) { --fond-carte: var(--brun-fonce); --texte-carte: var(--creme); --picto: var(--sable); }
.mission:nth-child(2) { --fond-carte: var(--brun);       --texte-carte: var(--creme); --picto: var(--sable); }
.mission:nth-child(3) { --fond-carte: var(--brun-moyen); --texte-carte: var(--creme); --picto: var(--creme); }
.mission:nth-child(4) { --fond-carte: var(--sable);      --texte-carte: var(--brun-fonce); --picto: var(--brun-fonce); }
.mission:nth-child(5) { --fond-carte: var(--creme);      --texte-carte: var(--brun-fonce); --picto: var(--brun-moyen); }

.mission__picto {
  width: 44px;
  height: 44px;
  flex: none;
  fill: none;
  stroke: var(--picto);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mission__texte {
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
}

/* Tablette : 3 + 2 cartes, centrées */
@media (max-width: 1023px) {
  .missions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mission { width: calc((100% - 2rem) / 3); }
}

/* Mobile : une carte par ligne, picto à gauche */
@media (max-width: 640px) {
  .mission {
    width: 100%;
    flex-direction: row;
    text-align: left;
    padding: 1.25rem 1.25rem;
  }
  .mission__picto { width: 36px; height: 36px; }
}

/* ---------- 8. Le diplomate ---------- */
.diplomate {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1.25rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

.diplomate__accroche {
  margin: 0;
  font-family: var(--police-slogan);
  font-weight: 700;          /* Walkway Bold, comme « La réponse dans ces quatre récits. » */
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--brun-moyen);
}

.diplomate__texte {
  border-left: 2px solid var(--sable);
  padding-left: 2rem;
}
.diplomate__texte p { margin: 0 0 1rem; }
.diplomate__texte p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .diplomate { grid-template-columns: 1fr; gap: 1.5rem; }
  .diplomate__texte { padding-left: 1.25rem; }
}

/* séparateur entre sections */
.site > .helice { margin: 4rem auto; }

/* ---------- 9. Les 4 récits ---------- */
.recits {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.recits__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
}

.recits__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.25;
  color: var(--brun-fonce);
}

.recits__questions {
  margin: .9rem 0 0;
  font-size: 1.15rem;
  color: var(--brun-moyen);
}

.recits__intro .slogan { margin: 1.25rem 0 0; }

.recits__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 1.75rem;
  align-items: stretch;
}

/* Vignette */
.recit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.recit__image {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--sable);
  box-shadow: 0 0 0 6px var(--papier), 0 0 0 7px rgba(189,160,120,.45);
  margin: 7px 0 1.5rem;
  transition: transform .3s ease;
}

.recit__accroche {
  margin: 0 0 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--brun-fonce);
}

/* Les boutons s'alignent en bas, même si les accroches n'ont pas la même longueur */
.recit__bouton {
  margin-top: auto;
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--brun);
  background: transparent;
  border: 1px solid var(--brun);
  border-radius: 2px;
  padding: .7rem 1.4rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.recit__bouton::after { content: " ↓"; }
.recit__bouton:hover,
.recit__bouton[aria-expanded="true"] {
  background: var(--brun);
  color: var(--papier);
}
.recit__bouton[aria-expanded="true"]::after { content: " ↑"; }
.recit__bouton:focus-visible,
.recit__fermer:focus-visible { outline: 2px solid var(--sable); outline-offset: 3px; }

/* la vignette du récit ouvert se distingue */
.recit.est-ouvert .recit__image { transform: scale(1.04); border-color: var(--brun-moyen); }

/* Suite du récit : prend toute la largeur sous la rangée */
.recit__suite {
  grid-column: 1 / -1;
  position: relative;
  background: #fff;
  border: 1px solid #ebe1cf;
  border-top: 3px solid var(--sable);
  padding: 2.75rem clamp(1.25rem, 5vw, 4.5rem) 2.25rem;
  animation: deplier .35s ease both;
}
.recit__suite p {
  max-width: 72ch;
  margin: 0 auto 1rem;
}
.recit__suite p:first-child { color: var(--brun-fonce); }

/* grand guillemet décoratif */
.recit__suite::before {
  content: "«";
  position: absolute;
  top: .4rem;
  left: clamp(.5rem, 2vw, 1.5rem);
  font-family: var(--police-titre);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--sable);
  opacity: .6;
}

.recit__fermer {
  display: block;
  margin: 1.5rem auto 0;
  font: inherit;
  font-size: .9rem;
  color: var(--brun-moyen);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@keyframes deplier {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Tablette : 2 vignettes par ligne, la suite s'ouvre sous sa ligne */
@media (max-width: 1023px) {
  .recits__grille { grid-template-columns: repeat(2, 1fr); }
  .recits__grille > * { order: var(--ordre-t); }
  .recit__suite::before { display: none; }
}

/* Mobile : 1 vignette par ligne, la suite s'ouvre juste dessous */
@media (max-width: 600px) {
  .recits__grille { grid-template-columns: 1fr; gap: 3rem; }
  .recits__grille > * { order: var(--ordre); }
  .recit__image { max-width: 220px; }
  .recit__suite { margin-top: -1.5rem; padding-top: 2rem; }
  /* l'accroche est juste au-dessus : inutile de la répéter */
  .recit__suite p:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .recit__suite { animation: none; }
  .recit__image { transition: none; }
}

/* ---------- 10. La méthode : l'accompagnement ---------- */
.methode {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.25rem 1rem;
  text-align: center;
}

.methode__intro {
  max-width: 62ch;
  margin: 1.75rem auto 2.75rem;
}

.methode__liste {
  max-width: 62ch;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.methode__liste li {
  padding: 1.05rem 0 1.05rem 1.75rem;
  border-bottom: 1px solid #ebe1cf;
  position: relative;
}

.methode__liste li:last-child { border-bottom: 0; }

.methode__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sable);
}

.methode__liste strong { color: var(--brun-fonce); }

/* ---------- 11. Les ambassades de projets ---------- */
.ambassades {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  text-align: center;
}

.ambassades__texte {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  color: var(--brun-fonce);
}

.ambassades__texte strong { font-weight: 400; }