/* ==========================================================================
   Quadrupède — V3
   Transposition fidèle de la V2 (02-Dev/scss/main.scss + typo.scss) :
   mêmes sélecteurs, mêmes valeurs, même ordre. Changements volontaires, repérés « V3 » :
   - texte courant 13px → 16–17.5px (--text) ;
   - colonnes en ch (--col) au lieu de px, pour garder les proportions de la V2 ;
   - un palier intermédiaire à 3 colonnes entre la grille à 5 colonnes et le mobile ;
   - paliers en @container (ch du texte courant) au lieu de @media 960px ;
   - vh → svh ; polices hébergées localement ; accessibilité.
   ========================================================================== */

/* --- Polices : fichiers exacts servis par Google Fonts à la V2 (Raleway variable) ---
   Déclarée en deux graisses seulement, 400 et 800, comme le faisait Google pour la V2 :
   le « bold » (700) des titres se résout alors en 800. Avec une plage 100–900, il
   s'afficherait en 700, plus maigre que la V2. */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-variable.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-variable.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("../fonts/dancing-script-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* --- Variables ------------------------------------------------------------ */

:root {
  --main-color: rgb(237, 236, 231);
  --font-color: rgb(101, 79, 101);
  /* V3 : texte courant, 16px → 17.5px (la racine est à 95 % comme en V2, d'où ces rem) */
  --text: clamp(1.0526rem, 0.9474rem + 0.25vw, 1.1513rem);
  /* V3 : 1 colonne de la V2 = 280px pour un texte de 13px ≈ 35ch */
  --col: 35ch;
  /* V3 : interlignage. Plus le texte est grand, plus l'interligne est proportionnellement serré :
     une part fixe (0.33rem) + une part proportionnelle (1.06em). Calé sur deux repères :
     13px → ×1.45 (l'équilibre de la V2) et 17.5px → ×1.35.
     Les lignes longues (> ~65 caractères) ont 0.1em de plus.
     Custom property non enregistrée : les em se résolvent sur l'élément qui l'utilise. */
  --lh-short: calc(1.06em + 0.33rem);
  --lh-long:  calc(1.16em + 0.33rem);
}

/* --- typo.scss ------------------------------------------------------------- */

html {
  font-family: "Raleway", sans-serif;
  font-size: 95%;
  line-height: 1.45;
}

h1, h2, h3 { text-transform: uppercase; }

p.tagline { font-family: "Dancing Script", cursive; }

strong {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
}

/* --- Styles communs -------------------------------------------------------- */

body {
  margin: 0;
  color: var(--font-color);
  background: url("../imgs/main-bg-texture.png"), url("../imgs/main-bg.jpg"), var(--main-color);
  /* V3 : WebP avec repli PNG/JPG (la ligne au-dessus sert aux navigateurs sans image-set) */
  background-image:
    image-set(url("../imgs/main-bg-texture.webp") type("image/webp"), url("../imgs/main-bg-texture.png") type("image/png")),
    image-set(url("../imgs/main-bg.webp") type("image/webp"), url("../imgs/main-bg.jpg") type("image/jpeg"));
  background-repeat: repeat, no-repeat;
  background-size: auto, 100% auto;
  /* V3 : le texte courant est porté par body, pour que les paliers @container
     se mesurent en ch de ce texte ; header et footer reprennent la taille de la V2 */
  font-size: var(--text);
  container-type: inline-size;
}

h1, h2 { margin: 0; }

/* V3 : les citations sont en <blockquote> (lecteurs d'écran) ; on retire ses marges par défaut
   (≈ 40px à gauche et à droite, 1em en haut et en bas) pour garder la mise en page de la V2 */
blockquote { margin: 0; }

p {
  padding: 0 2.5em 0 0;
  margin: 0 0 0.9em 0;
  line-height: var(--lh-short);        /* V3 */
}

.border-left {
  border-left: 12px solid var(--font-color);
  padding: 0 0 0 1em;
  margin: 0;
}

.no-border {
  border: none;
  padding: 0;
  margin: 0;
}

a:any-link { color: var(--font-color); }

/* V3 : texte lu par les lecteurs d'écran, invisible à l'écran */
.visually-hidden {
  position: absolute;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* V3 : type et poids du fichier, sous le lien de l'agenda */
.file-info { font-size: 0.85em; }

/* V3 : contour de focus visible au clavier */
:focus-visible {
  outline: 3px solid var(--font-color);
  outline-offset: 3px;
}

.rnd-btn {
  display: flex;
  align-items: center;
  line-height: var(--lh-short);        /* V3 */
}
.rnd-btn svg { flex: none; fill: var(--font-color); }
.rnd-btn > p,
.rnd-btn > span { padding: 0 0 0 1em; margin: 0; }   /* le libellé, pas les span qu'il contient */
.rnd-btn:hover { text-decoration: none; }

/* V3 : le bouton de sélection aléatoire est un vrai <button>, rendu comme le lien d'origine */
button.rnd-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: var(--lh-short);        /* après font: inherit, qui remet l'interligne à zéro */
  color: inherit;
  text-align: start;
  cursor: pointer;
}
button.rnd-btn > span { text-decoration: underline; }
button.rnd-btn:hover > span { text-decoration: none; }

/* V3 : animation seulement si l'utilisateur n'a pas demandé de réduire les animations */
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.5s infinite alternate; }
}
@keyframes pulse {
  0%   { opacity: 0.8; }
  100% { opacity: 1; }
}

/* --- Header (identique à la V2, en rem et px ; vh → svh) ------------------- */

header {
  font-size: 1rem;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(280px, min-content) minmax(280px, min-content) minmax(280px, min-content) minmax(1em, 1fr);
  grid-template-rows: 1fr 80px 1fr;
  grid-gap: 0;
  grid-template-areas:
    ". tagline front-img . ."
    ". logo logo . ."
    ". . intro intro .";
}

header .front-img {              /* V3 : <picture> (WebP + PNG), c'est lui qui est placé sur la grille */
  grid-area: front-img;
  max-width: 280px;
  align-self: end;
  justify-self: center;
  margin-bottom: 1rem;
}
header .front-img img { display: block; max-width: 100%; height: auto; }

header p { margin: 0; padding: 0; }

header h1.logo {
  grid-area: logo;
  align-self: start;
  justify-self: right;
  font-size: 4.9rem;
  line-height: 4.9rem;
  margin: 0 50px 0 0;
}

header .tagline {
  grid-area: tagline;
  align-self: end;
  justify-self: right;
  font-size: 4.55rem;
  line-height: 4.85rem;
  margin-bottom: 0;
}

header .intro {
  grid-area: intro;
  font-size: 1.25rem;
  margin: 0;
  line-height: var(--lh-long);         /* V3 : lignes longues */
}

/* --- Main ------------------------------------------------------------------ */

main { padding: 0; }

main h2 {
  color: var(--font-color);
  font-size: 3rem;
  line-height: 3rem;
  border-bottom: 12px solid var(--font-color);
  margin: 2em 0 0 0;
}

/* --- Agenda / Intervenants / Approche -------------------------------------- */

#ag-in-ap {
  min-height: 36svh;
  padding-bottom: 6svh;
  display: grid;
  /* V3 : minmax(140px, 280px) → colonnes en ch, sans gouttière (comme la V2) */
  grid-template-columns: minmax(2em, 1fr) repeat(5, minmax(0, var(--col))) minmax(2em, 1fr);
  font-size: 1em;
  grid-template-areas:
    "ag1 ag1 . . . . ."
    ". . ag2 . . . ."
    ". . in1 in1 . . ."
    ". . . . in2 in3 ."
    ". . . . ap1 ap1 ap1"
    ". . . ap2 . . ."
    ". . ap3 . . . ."
    ". ap4 . . ap5 . ."
    ". . ap6 . . ap7 .";
}

#ag-in-ap .ag1 { grid-area: ag1; text-align: end; }
#ag-in-ap .ag2 { grid-area: ag2; }
#ag-in-ap .in1 { grid-area: in1; text-align: end; }
#ag-in-ap .in2 { grid-area: in2; }
#ag-in-ap .in3 { grid-area: in3; }
#ag-in-ap .ap1 { grid-area: ap1; margin-bottom: 9svh; }
#ag-in-ap .ap2 { grid-area: ap2; }
#ag-in-ap .ap3 { grid-area: ap3; }
#ag-in-ap .ap4 { grid-area: ap4; }
#ag-in-ap .ap5 { grid-area: ap5; }
#ag-in-ap .ap6 { grid-area: ap6; }
#ag-in-ap .ap7 { grid-area: ap7; }
#ag-in-ap .ap2, #ag-in-ap .ap3, #ag-in-ap .ap4,
#ag-in-ap .ap5, #ag-in-ap .ap6, #ag-in-ap .ap7 { min-height: 18svh; align-self: center; }

/* --- Ressources ------------------------------------------------------------ */

#ressources {
  border-top: 12px solid var(--font-color);
  background-color: var(--main-color);
  display: grid;
  grid-template-columns: minmax(2em, 1fr) repeat(5, minmax(0, var(--col))) minmax(2em, 1fr);
  grid-gap: 0;
  grid-template-areas:
    ". . . . r1 r2 ."
    ". . . r3 r1 r2 ."
    ". . . . r1 r2 ."
    ". . r5 r4 r4 r4 r4"
    ". . r5 r7 r7 r7 ."
    ". . . r7 r7 r7 ."
    ". r6 r6 r7 r7 r7 .";
}

#ressources .r1 {
  grid-area: r1;
  border-bottom: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  max-width: 50px;
  justify-self: end;
}

#ressources .r2 {
  grid-area: r2;
  align-self: stretch;
  border-left: 12px solid var(--font-color);
  padding: 0 0 0 1em;
  margin: 0;
  display: flex;
  align-items: flex-end;
}

#ressources .r3 { grid-area: r3; align-self: center; }

#ressources .r4 { grid-area: r4; }
/* V3 : <picture> (WebP + JPG) au lieu d'une image de fond ; object-fit reproduit le background-size: cover */
#ressources .r4 #random-img {
  display: block;
  margin-top: 2.5em;
}
#ressources .r4 #random-img img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: right center;
}

#ressources .r5 { grid-area: r5; margin: 2.2em 0 2.5em 0; text-align: right; }
#ressources .r6 { grid-area: r6; margin: 2.2em 0 1.8em 5em; font-size: 1.08em; text-align: right; justify-self: end; }
/* V3 : citations moyennes et longues = lignes longues (la V2 mettait 1.5em sur .r6) */
#ressources .r6 p, #ressources .r7 p { line-height: var(--lh-long); }
#ressources .r7 { grid-area: r7; margin: 2.2em 5em 1.6em 0; font-size: 1.25em; }

/* une seule citation visible par groupe (le JS mélange l'ordre) */
#ressources .s-quote, #ressources .m-quote, #ressources .l-quote { display: none; }
#ressources .s-quote:nth-child(-n+1), #ressources .m-quote:nth-child(-n+1), #ressources .l-quote:nth-child(-n+1) { display: block; }

/* V2 : 0.85rem, soit à peu près la taille du texte courant de 13px ;
   V3 : même rapport, calé sur le texte courant */
#ressources .refs { font-size: var(--text); }

/* --- Footer ---------------------------------------------------------------- */

footer {
  font-size: var(--text);              /* V3 : comme le texte courant (V2 : 1rem), tout le pied de page grandit un peu */
  min-height: 20svh;
  padding: 3em 0 3em 0;
  background-color: var(--font-color);
  color: var(--main-color);
  display: grid;
  /* V3 : la même grille que les sections (même taille de texte → mêmes ch et mêmes marges en em) */
  grid-template-columns: minmax(2em, 1fr) repeat(5, minmax(0, var(--col))) minmax(2em, 1fr);
  grid-template-areas: ". logo logo contact contact . .";
}

/* V3 : même gouttière que les deux citations au-dessus : la citation moyenne (.r6, texte à 1.08em)
   s'arrête à 2.5em de sa colonne → 2.5 × 1.08 = 2.7em ici */
footer .footer-logo { grid-area: logo; text-align: right; margin-right: 2.7em; }
footer .contact { grid-area: contact; font-size: 0.9em; padding-top: 3em; }
footer .contact a { color: var(--main-color); }
footer :focus-visible { outline-color: var(--main-color); }
footer .tagline { font-size: 1.8em; line-height: 1em; margin: 0; }
footer .logo { font-size: 1.6em; line-height: 1em; margin: 0; font-weight: bold; text-transform: uppercase; }
footer .small { font-size: 0.9em; }


/* ==========================================================================
   V3 — palier intermédiaire : 3 colonnes
   Actif quand 5 colonnes d'au moins 28ch ne tiennent plus (28ch ≈ 33 caractères
   de texte dans un bloc). var() interdit dans la condition : valeurs recopiées.
   ========================================================================== */

@container (width <= calc(5 * 28ch + 4em)) {

  #ag-in-ap,
  #ressources {
    grid-template-columns: minmax(2em, 1fr) repeat(3, minmax(0, var(--col))) minmax(2em, 1fr);
  }

  #ag-in-ap {
    grid-template-areas:
      "ag1 ag1 . . ."
      ". . ag2 . ."
      ". in1 . . ."
      ". . in2 in3 ."
      ". . ap1 ap1 ap1"
      ". ap2 . . ."
      ". . ap3 . ."
      ". ap4 . ap5 ."
      ". . ap6 . ."
      ". . . ap7 .";
  }

  #ressources {
    grid-template-areas:
      ". . r1 r2 ."
      ". r3 r1 r2 ."
      ". . r1 r2 ."
      ". r5 r4 r4 r4"
      ". r5 r7 r7 ."
      ". . r7 r7 ."
      ". r6 r7 r7 .";
  }
  #ressources .r6 { margin-left: 0; }
  #ressources .r7 { margin-right: 2em; }

  footer {
    grid-template-columns: minmax(2em, 1fr) repeat(3, minmax(0, var(--col))) minmax(2em, 1fr);
    grid-template-areas: ". logo contact contact .";
  }
}


/* ==========================================================================
   Mobile (V2 : @media max-width 960px)
   Header et fond : même @media que la V2.
   Reste de la page (V3) : actif quand 3 colonnes d'au moins 28ch ne tiennent plus.
   ========================================================================== */

@media (max-width: 960px) {
  body {
    background: url("../imgs/main-bg-texture.png"), url("../imgs/main-bg-mobile.jpg"), var(--main-color);
    background-image:
      image-set(url("../imgs/main-bg-texture.webp") type("image/webp"), url("../imgs/main-bg-texture.png") type("image/png")),
      image-set(url("../imgs/main-bg-mobile.webp") type("image/webp"), url("../imgs/main-bg-mobile.jpg") type("image/jpeg"));
    background-repeat: repeat, no-repeat;
    background-size: auto, 100% auto;
  }

  header {
    grid-template-columns: minmax(1em, 1fr) minmax(1em, min-content) minmax(280px, min-content) minmax(1em, min-content) minmax(1em, 1fr);
    grid-template-rows: 1fr 60px 60px 1fr;
    grid-template-areas:
      ". front-img front-img front-img ."
      ". tagline tagline tagline ."
      ". logo logo logo ."
      ". intro intro intro .";
  }
  header .tagline,
  header h1.logo {
    justify-self: center;
    font-size: 2rem;
    line-height: 2.2rem;
    margin: 0;
  }
  header .intro { text-align: center; line-height: var(--lh-short); }   /* V3 : lignes courtes sur mobile */
}

@container (width <= calc(3 * 28ch + 4em)) {

  p { padding: 0; }
  .rnd-btn { justify-content: center; }
  .border-left { border-left: none; padding: 0; }
  .no-border, .border-left { margin: 0 0 0.9em 0; }

  main #ag-in-ap .ag1, main #ag-in-ap .in1, main #ag-in-ap .ap1, main #ressources .r1 {
    font-size: 2rem;
    line-height: 2.2rem;
    margin: 2em 0 0.5em 0;
    text-align: center;
  }

  #ag-in-ap {
    grid-template-columns: minmax(1em, 0.5fr) minmax(0, 2fr) minmax(1em, 0.5fr);
    grid-template-areas:
      ". ag1 ."
      ". ag2 ."
      ". in1 ."
      ". in2 ."
      ". in3 ."
      ". ap1 ."
      ". ap2 ."
      ". ap3 ."
      ". ap4 ."
      ". ap5 ."
      ". ap6 ."
      ". ap7 .";
  }
  #ag-in-ap .ap2, #ag-in-ap .ap3, #ag-in-ap .ap4,
  #ag-in-ap .ap5, #ag-in-ap .ap6, #ag-in-ap .ap7 { min-height: auto; }

  #ressources {
    border-top: none;
    grid-template-columns: minmax(1em, 0.5fr) minmax(0, 2fr) minmax(1em, 0.5fr);
    grid-template-areas:
      "r4 r4 r4"
      ". r1 ."
      ". r2 ."
      ". r3 ."
      ". r5 ."
      ". r6 ."
      ". r7 .";
  }
  #ressources .r1 {
    writing-mode: horizontal-tb;
    justify-self: center;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-bottom: 12px solid var(--font-color);
  }
  #ressources .r2 { border-left: none; padding: 0; margin-bottom: 2.2em; }
  #ressources .r3 { margin-bottom: 2.5em; }
  #ressources .r4 #random-img { margin-top: 0; }
  #ressources .r4 #random-img img { height: 350px; }
  #ressources .r5, #ressources .r6, #ressources .r7 { text-align: left; margin: 0 0 2.2em 0; }
  #ressources .r7 { font-size: 1em; }
  #ressources .r6 p, #ressources .r7 p { line-height: var(--lh-short); }   /* V3 : lignes courtes */

  footer {
    grid-template-columns: minmax(1em, 0.5fr) minmax(0, 2fr) minmax(1em, 0.5fr);
    grid-template-areas:
      ". logo ."
      ". contact .";
  }
  footer .footer-logo { text-align: center; margin-right: 0; }
  footer .contact { padding-top: 0; text-align: center; }
}

@media (max-width: 600px) {
  header .front-img { max-width: 200px; }
}

@container (width <= 600px) {
  #ag-in-ap, #ressources, footer {
    grid-template-columns: minmax(1em, 2em) minmax(0, 2fr) minmax(1em, 2em);
  }
  #ressources .r4 #random-img img {
    height: 200px;
    object-position: center center;
  }
}