/* Raisona : feuille commune du site. */

@import url("fonts/fonts.css");

:root {
  --blanc: #FFFFFF;
  --encre: #0F1B2D;
  --plan: #1E4FA0;
  --cyano: #123F91;
  --cyano-fonce: #0C2F73;
  --cyano-clair: #2A62BE;
  --trame: #E6ECF3;
  --gris: #5A6878;
  --sur-plan: #FFFFFF;
  --sur-plan-doux: #C9DAF5;
  --marque: #FFFFFF; /* nom « Raisona » dans l'en-tête bleu ; jaune #FFD23F retiré le 5/11 (Ambroise : « bof »), en attendant le logo */

  --f-titre: "Red Hat Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-texte: "Red Hat Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Red Hat Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  /* Échelle : 13 / 15 / 17 / 20 / 36 / 72 */
  --t-mono: 0.8125rem;
  --t-petit: 0.9375rem;
  --t-corps: 1.0625rem;
  --t-h3: 1.25rem;
  --t-h2: clamp(1.875rem, 3.2vw, 2.5rem);
  --t-h1: clamp(2.5rem, 5.6vw, 4.5rem);
  --t-geant: clamp(2.125rem, 4.6vw, 3.75rem);
  --gouttiere: clamp(16px, 4vw, 40px);
  --colonne: 24px;
  --section: clamp(64px, 9vw, 120px);
  --entete-h: 72px;
}
@media (max-width: 639px) { :root { --entete-h: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-corps);
  line-height: 1.55;
  font-kerning: normal;
}
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img, svg { height: auto; }
a { color: var(--plan); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a, button { touch-action: manipulation; } /* un seul toucher suffit, sans attendre un éventuel double toucher */
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 2px solid var(--plan); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.insec { white-space: nowrap; }

.saut { position: absolute; z-index: 10; left: var(--gouttiere); top: -80px; padding: 8px 12px; background: var(--blanc); border: 1px solid var(--encre); color: var(--encre); }
.saut:focus { top: 8px; }

.cadre { width: min(100% - 2 * var(--gouttiere), 1200px); margin-inline: auto; }

.etiquette {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}
h1 {
  font-family: var(--f-titre);
  font-weight: 650;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2 {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.lien-fleche svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- En-tête ---------- */
.entete { position: absolute; z-index: 2; top: 0; left: 0; right: 0; color: var(--sur-plan); background: linear-gradient(rgba(18, 63, 145, 0.9), rgba(18, 63, 145, 0.72) 55%, rgba(18, 63, 145, 0)); }
.entete :focus-visible { outline-color: var(--sur-plan); }
.entete__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 16px; }
.marque {
  /* Logo (R en courbes de niveau, raie en creux, livraison 3 du 30/10) posé le 5/11 ; le mot reste dans le lien pour
     les lecteurs d'écran, caché à l'œil. Proportions du dessin : 1426,51 × 277,48. */
  display: inline-block;
  height: 1.75rem;
  aspect-ratio: 1426.51 / 277.48;
  background: url("img/raisona-logo-blanc.svg") left center / contain no-repeat;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  margin-right: auto;
}
.nav ul { display: flex; align-items: baseline; gap: 28px; }
.nav a { color: var(--sur-plan); text-decoration: none; font-size: var(--t-petit); }
@media (hover: hover) { .nav a:hover { text-decoration: underline; } }
/* Sélecteur de langue : dernier élément de la navigation, en petite étiquette. La marge négative agrandit la zone de toucher sans changer la ligne. */
.nav__langue a { display: inline-block; margin: -6px -8px; padding: 6px 8px; font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em; }
.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sur-plan);
  color: var(--sur-plan);
  font-size: var(--t-petit);
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) { .bouton:hover { background: var(--sur-plan); color: var(--cyano); } }
@media (max-width: 639px) {
  .nav { order: 3; flex-basis: 100%; }
  .nav ul { gap: 24px; }
  .nav__langue { margin-left: auto; }
}
@media (max-width: 359px) { .nav ul { gap: 14px; } }

/* ---------- Scène : tirage bleu pleine largeur, canvas sur image de repli ---------- */
.scene { position: relative; overflow: hidden; padding-top: var(--entete-h); background: var(--cyano); color: var(--sur-plan); }
.scene :focus-visible { outline-color: var(--sur-plan); }
.scene--haute { min-height: min(80vh, 900px); display: flex; align-items: center; }
.scene .etiquette { color: var(--sur-plan-doux); }
.scene__fond { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.repli, .vivant { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; }
.repli { object-fit: cover; object-position: right bottom; }
.vivant { opacity: 0; background: var(--cyano); } /* opaque : l'image de repli ne doit pas transparaître */
.vivant.pret { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .vivant { transition: opacity 0.5s ease-out; } }
@media (prefers-reduced-motion: reduce) { .vivant { display: none; } }
.scene__texte { position: relative; display: flex; flex-direction: column; gap: 24px; padding-block: clamp(56px, 8vw, 112px); }
.scene__texte > * { max-width: 40rem; }
.chapeau { font-size: var(--t-h3); line-height: 1.5; max-width: 32em; }

/* ---------- Récit des pages projet ---------- */
.recit { padding-block: var(--section); }
.recit__in { display: flex; flex-direction: column; gap: 24px; }
.recit__in > p, .recit__in > h2, .duo > div > p { max-width: 65ch; }
.recit--plan { background: var(--cyano); color: var(--sur-plan); }
.recit--plan .etiquette { color: var(--sur-plan-doux); }
.recit--plan a { color: var(--sur-plan); }
.recit--plan :focus-visible { outline-color: var(--sur-plan); }
.duo { display: grid; gap: 40px var(--colonne); align-items: center; }
.duo > * { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .duo--inverse > :first-child { order: 2; }
}
.grand {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-geant);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22em;
}
.planche {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--cyano);
  color: var(--sur-plan);
}
.planche svg { width: 100%; }
.planche figcaption { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.02em; line-height: 1.5; color: var(--sur-plan-doux); }
.planche--claire {
  background-color: var(--blanc);
  background-image: linear-gradient(var(--trame) 1px, transparent 1px), linear-gradient(90deg, var(--trame) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--plan);
  border: 1px solid var(--trame);
}
.planche--claire figcaption { color: var(--gris); }

/* ---------- Suite : vers les autres projets ---------- */
.suite { display: grid; gap: 1px; background: var(--trame); border-block: 1px solid var(--trame); }
@media (min-width: 720px) { .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.suite__lien {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(32px, 4vw, 56px) var(--gouttiere);
  background: var(--blanc);
  color: var(--encre);
  text-decoration: none;
}
.suite__titre { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
@media (hover: hover) { .suite__lien:hover { background: var(--cyano); color: var(--sur-plan); } }
@media (hover: hover) { .suite__lien:hover .etiquette { color: var(--sur-plan-doux); } }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--trame); padding-block: 24px 32px; font-family: var(--f-mono); font-size: var(--t-mono); color: var(--gris); }
.pied__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.pied a { color: var(--gris); }
@media (hover: hover) { .pied a:hover { color: var(--plan); } }