/* ──────────────────────────────────────────────────────────────
   ESSAI VISUEL · photos, code couleur, animation
   Fichier isolé : le retirer de index.html suffit à revenir à la
   version précédente (sauvegarde complète dans _outils/sauvegardes/).
   Règles de la charte respectées : angles vifs, aucune ombre, aucun
   dégradé, photos réelles de Rouen en lumière naturelle.
   ────────────────────────────────────────────────────────────── */

/* ── ouverture : texte à gauche, symbole photographique à droite ── */
.ouverture{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){ .ouverture{grid-template-columns:1.08fr .92fr} }
.ouverture .texte{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,24px)}

/* ── le symbole fait de Rouen ──
   Les trois parcelles reprennent au point près la géométrie du logo
   (viewBox 48 × 48), converties en pourcentages. La grande parcelle
   porte la photo, les deux petites gardent le citron et le turquoise. */
.symbole-photo{position:relative;aspect-ratio:1;width:100%;max-width:520px;
               justify-self:center;overflow:hidden}
.symbole-photo > span{position:absolute;inset:0;display:block}
.sp-1{clip-path:polygon(0 0,70.83% 0,43.75% 100%,0 100%);
      background:url('../assets/photos/rouen-gros-horloge.webp') 38% center/cover var(--gg-petrole)}
.sp-2{clip-path:polygon(78.13% 0,100% 0,100% 46.35%,64.73% 49.48%);background:var(--gg-citron)}
.sp-3{clip-path:polygon(62.75% 56.77%,100% 53.65%,100% 100%,51.04% 100%);background:var(--gg-turquoise)}
.symbole-legende{margin-top:12px;justify-self:center;width:100%;max-width:520px}

/* les parcelles s'assemblent à l'ouverture, depuis un état visible */
@keyframes assemble-1{from{transform:translate(-4%,0)}}
@keyframes assemble-2{from{transform:translate(5%,-5%)}}
@keyframes assemble-3{from{transform:translate(5%,5%)}}
.sp-1{animation:assemble-1 1.1s cubic-bezier(.2,.7,.2,1) both}
.sp-2{animation:assemble-2 1.1s .08s cubic-bezier(.2,.7,.2,1) both}
.sp-3{animation:assemble-3 1.1s .16s cubic-bezier(.2,.7,.2,1) both}

/* ── bandeau de chiffres sous l'ouverture ── */
.chiffres{margin-top:clamp(28px,4vw,48px)}

/* ── code couleur des dispositifs, aligné sur la légende du simulateur ──
   Séries de la charte : citron, ambre, turquoise, pétrole ; gris pour les SCPI. */
.dc{border-top:6px solid var(--dc)}
.dc .etq{color:var(--dc-txt,var(--dc))}
.dc-loc {--dc:var(--gg-citron);--dc-txt:#3F6A0A}
.dc-deno{--dc:var(--gg-ambre);--dc-txt:var(--gg-ambre-texte)}
.dc-lmnp{--dc:var(--gg-turquoise);--dc-txt:var(--gg-turquoise-texte)}
.dc-nu  {--dc:var(--gg-petrole)}
.dc-scpi{--dc:var(--gg-gris-500)}
.pl .corps{font-size:15px}
.pl a{text-decoration-color:var(--gg-citron);text-decoration-thickness:2px}

/* ── parcelles photographiques ── */
.pl-photo{padding:0;position:relative;min-height:clamp(240px,32vw,380px);
          background-color:var(--gg-sable);background-position:center;background-size:cover}
.pl-photo figcaption,.legende-photo{
  font-family:var(--f-etq);font-weight:600;font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gg-petrole);background:var(--gg-sable);
  padding:7px 10px;display:inline-block;line-height:1.3}
.pl-photo figcaption{position:absolute;left:0;bottom:0}
figure.pl-photo{margin:0}
.parcelles.p-photos{grid-template-columns:1fr}
@media(min-width:760px){ .parcelles.p-photos{grid-template-columns:1.45fr 1fr} }

/* ── qui je suis : le portrait reste discret ── */
.parcelles.p-qui{grid-template-columns:1fr}
@media(min-width:860px){ .parcelles.p-qui{grid-template-columns:2fr 1fr} }
.qui-carte{gap:16px}
.qui-carte .corps{font-size:16px;line-height:1.6}
.qui-tete{display:flex;align-items:center;gap:18px}
.portrait{flex:none;width:clamp(84px,9vw,104px);aspect-ratio:4 / 5;
          background:url('../assets/photos/gregory-grenet.webp') 50% 22%/cover var(--gg-sable)}
.signature{font-family:var(--f-nom);font-weight:600;font-size:clamp(26px,3vw,34px);
           line-height:1.05;color:#fff;margin:0}

/* ── simulateur : les courbes s'affirment à chaque calcul ──
   Fondu depuis un état déjà visible : si le navigateur suspend les
   animations, les courbes restent lisibles. */
@keyframes affirme{from{opacity:.35}}
#s-sortie svg path,#s-sortie svg circle{animation:affirme .6s ease-out}

@media (prefers-reduced-motion:reduce){
  .sp-1,.sp-2,.sp-3,#s-sortie svg path,#s-sortie svg circle{animation:none}
}