/* Accueil : un grand tirage bleu pleine largeur avec un monde tracé en courbes de niveau, une bande de logos, trois tirages de projets au même niveau, puis offres, à propos, contact sur blanc. */
.ciel { min-height: clamp(640px, 84vh, 900px); display: flex; flex-direction: column; justify-content: center; }
.ciel .scene__texte { padding-block: clamp(32px, 6vw, 88px) max(240px, 66vw); gap: 28px; }
.ciel .scene__texte > * { max-width: 42rem; }
.ciel .chapeau { font-size: var(--t-corps); }
.ciel__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font-weight: 500; }
.ciel__liens a { color: var(--sur-plan); }
.ciel__liens .bouton { background: var(--sur-plan); color: var(--cyano); text-decoration: none; min-height: 48px; padding: 0 20px; font-size: var(--t-corps); }
@media (hover: hover) { .ciel__liens .bouton:hover { background: var(--sur-plan-doux); } }
@media (min-width: 900px) {
  .ciel .scene__texte { padding-block: clamp(56px, 7vw, 104px); }
  .ciel .scene__texte > * { max-width: min(40rem, 50vw); }
  .ciel .chapeau { max-width: 46vw; }
}
@media (min-width: 1200px) { .ciel .chapeau { font-size: var(--t-h3); max-width: 30em; } }

.clients { border-bottom: 1px solid var(--trame); padding-block: 28px; }
.clients__in { display: grid; align-items: center; gap: 20px var(--colonne); }
.clients__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.clients__liste img { width: auto; }
.logo-cnes { height: 50px; }
.logo-edf { height: 28px; }
.logo-esante { height: 40px; }
@media (min-width: 760px) {
  .clients__in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .clients h2 { grid-column: 1 / span 3; }
  .clients__liste { grid-column: 4 / -1; justify-content: space-between; max-width: 720px; }
  .logo-cnes { height: 60px; }
  .logo-edf { height: 32px; }
  .logo-esante { height: 46px; }
}
.clients h2 { font: 500 var(--t-mono) / 1.55 var(--f-mono); letter-spacing: 0.08em; }

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section__in { display: grid; gap: 40px var(--colonne); }

/* minmax(0, 1fr) : sans cela, WebKit élargit la colonne à 800 px sur téléphone à cause des cartes en aspect-ratio. */
.projets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.projets__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
@media (min-width: 900px) { .projets__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projet {
  --projet-marge: clamp(16px, 2.8vw, 48px);
  display: flex;
  flex-direction: column;
  background: var(--cyano);
  color: var(--sur-plan);
  text-decoration: none;
}
@media (hover: hover) { .projet:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; } }
.projet:focus-visible { outline-color: var(--encre); }
.projet__scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
@supports not (aspect-ratio: 1) { .projet__scene { padding-top: 75%; } }
.projet__scene .repli { object-position: center; }
.projet__texte { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 8px var(--projet-marge) var(--projet-marge); }
.projet__texte .etiquette { color: var(--sur-plan-doux); }
.projet h3 { font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; }
.projet__phrase { color: var(--sur-plan); line-height: 1.5; max-width: 34em; }
.projet__lien { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.projet__lien svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.2s ease-out; }
@media (hover: hover) { .projet:hover .projet__lien svg { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .projet__lien svg { transition: none; } .projet:hover .projet__lien svg { transform: none; } }
.projet:active { background: var(--cyano-fonce); } /* le toucher est pris en compte, même si la page suivante met du temps */

.offres { display: grid; gap: 40px var(--colonne); }
.offre { display: flex; flex-direction: column; gap: 10px; max-width: 34em; }
@media (min-width: 720px) { .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--colonne); } }
@media (min-width: 1080px) {
  .offres { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .offre:nth-child(odd) { grid-column: 1 / span 5; }
  .offre:nth-child(even) { grid-column: 7 / span 5; }
}

.apropos { display: grid; gap: 40px var(--colonne); align-items: start; }
.apropos__societe { font-size: var(--t-h3); line-height: 1.5; max-width: 30em; }
.fondateur { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
.fondateur__photo { width: 100%; }
.fondateur__bio { display: flex; flex-direction: column; gap: 6px; }
.fondateur__nom { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
.fondateur__texte { padding-top: 6px; font-size: var(--t-petit); line-height: 1.5; max-width: 32em; }
@media (min-width: 1080px) {
  .apropos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .apropos__societe { grid-column: 1 / span 6; }
  .fondateur { grid-column: 8 / -1; grid-template-columns: 144px minmax(0, 1fr); }
}

.contact { display: grid; gap: 32px var(--colonne); }
.contact__bloc { display: flex; flex-direction: column; gap: 8px; }
.contact__mail { font-family: var(--f-titre); font-weight: 600; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.contact address { font-style: normal; }
@media (min-width: 760px) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact__bloc:first-child { grid-column: 1 / span 6; }
  .contact__bloc:last-child { grid-column: 8 / -1; }
}