/* Pulsion Studio : pages de structure, Réalisations, Contact et À propos (docs/gabarits-pages.md 2.5 à 2.7).
   S'ajoute à experience.css, pages.css et expertises.css (filtres, carte des outils) ; ne contient que les composants propres à ces pages.
   Généré avec les sources par outils/source-structure.py. */

:root { --field-line: #858ba6; } /* bord des champs : contraste ≥ 3:1 sur blanc (WCAG 1.4.11) */

/* =====================================================================
   Réalisations : grille filtrable par besoin
   ===================================================================== */
.realisations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) 24px; }
.realisations-grid .work[hidden] { display: none; }
.realisations-grid .work :is(a, .work-card) { display: flex; flex-direction: column; gap: 16px; height: 100%; text-decoration: none; border-radius: 22px; }
.realisations-grid .work-media { aspect-ratio: 3 / 2; border-radius: 22px; background: #0a0928; box-shadow: 0 30px 60px -36px rgba(10, 30, 90, .45); }
.realisations-grid .work-meta { align-items: flex-start; }
.realisations-grid .work-name { transition: color .3s ease; }
.realisations-grid .work a:hover .work-name { color: var(--blue); }

/* Aucun projet pour le filtre choisi : la grille s'efface, une phrase honnête la remplace (sans script) */
.works-empty {
  display: none; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 720px;
  padding: clamp(26px, 3vw, 40px); border-radius: 24px; border: 1px dashed var(--field-line); background: var(--card);
}
.works-empty p { color: var(--muted); font-size: clamp(1rem, .97rem + .2vw, 1.1rem); text-wrap: pretty; }
.realisations-grid:not(:has(> .work:not([hidden]))) { display: none; }
.realisations-grid:not(:has(> .work:not([hidden]))) + .works-empty { display: flex; }

/* =====================================================================
   Contact : deux portes, l'appel mis en avant
   ===================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
.contact-side { position: sticky; top: calc(var(--nav-bottom, 90px) + 48px); display: flex; flex-direction: column; gap: 24px; }
.door {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(26px, 3vw, 44px);
  border-radius: 28px; border: 1px solid transparent; color: var(--fg);
  background: var(--card-fill) padding-box, var(--card-edge) border-box; box-shadow: var(--card-shadow);
  scroll-margin-top: 100px;
}
.door-text { color: var(--muted); text-wrap: pretty; }
.door-points { display: flex; flex-direction: column; gap: 10px; }
.door-points li { position: relative; padding-left: 22px; font-size: .95rem; text-wrap: pretty; }
.door-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 4px rgba(61, 123, 255, .2); }
.door--call .btn { margin-top: 6px; }

.contact-details { display: flex; flex-direction: column; gap: 4px; padding-inline: clamp(26px, 3vw, 44px); }
.contact-details-title { font-family: var(--font-title); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; }
.contact-details address { font-style: normal; color: var(--muted); }

/* ---------- Formulaire ---------- */
.contact-form { display: flex; flex-direction: column; gap: 22px; width: 100%; margin-top: 4px; }
.form-note { font-size: .875rem; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field legend { padding: 0; font-weight: 600; font-size: .95rem; color: var(--fg); }
.field legend { margin-bottom: 10px; }
/* Champs texte seulement : les boutons radio et cases à cocher des choix n'héritent plus de la hauteur d'un champ
   (retour de Loïs du 27 octobre : chaque choix du contact mesurait 78 px, plus qu'un champ texte) */
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--field-line);
  background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; letter-spacing: normal;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:not([type="radio"]):not([type="checkbox"]):hover, .field textarea:hover { border-color: var(--blue); }
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 91, 245, .12); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 14px; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 13px 16px; border-radius: 14px;
  border: 1px solid var(--field-line); background: var(--white); cursor: pointer;
  font-size: .95rem; font-weight: 500; line-height: 1.5; transition: border-color .2s ease, background-color .2s ease;
}
.choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.choice:hover { border-color: var(--blue); }
.choice:has(input:checked) { border-color: var(--blue); background: rgba(0, 91, 245, .06); box-shadow: inset 0 0 0 1px var(--blue); }

.consent { display: flex; align-items: flex-start; gap: 12px; }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.consent label { font-size: .95rem; cursor: pointer; text-wrap: pretty; }
.form-legal { font-size: .85rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.form-legal a { color: var(--fg); text-underline-offset: 3px; }
.form-legal a:hover { color: var(--blue); }
.contact-form .btn { align-self: flex-start; }
.contact-form[hidden], .form-confirm[hidden] { display: none; }
.form-confirm { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; border: 1px solid var(--blue); background: rgba(0, 91, 245, .05); }
.form-confirm:focus { outline: none; }
.form-confirm-title { font-family: var(--font-title); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; }
.form-confirm p:not(.form-confirm-title) { color: var(--muted); overflow-wrap: anywhere; }

/* =====================================================================
   À propos
   ===================================================================== */
.about-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.about-story .section-intro { margin-bottom: 28px; }
.prose { display: flex; flex-direction: column; gap: 1em; max-width: 62ch; color: var(--muted); font-size: clamp(1rem, .97rem + .2vw, 1.1rem); line-height: 1.7; text-wrap: pretty; }
.about-photo { margin: 0; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.duo-card { gap: 10px; padding: clamp(28px, 3vw, 40px); }
.story-item .duo-name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--blue); }
/* Photo de chacun : tant que l'image manque, un aplat doux avec l'initiale */
.duo-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 100% at 100% 0%, rgba(0, 91, 245, .12), rgba(0, 91, 245, 0) 65%), var(--paper); }
.duo-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Portraits détourés (Figma « Pulsion New ID », page LP) : dégradé de la marque, logo en filigrane en ombre douce, buste posé en bas du cadre */
.duo-photo:has(img) { position: relative; place-items: end center; background: radial-gradient(75% 85% at 50% 100%, rgba(61, 123, 255, .55), rgba(61, 123, 255, 0) 70%), linear-gradient(160deg, #f4f7ff 0%, #c5d6f9 100%); }
.duo-photo:has(img)::before { content: ""; position: absolute; top: 12%; left: 8%; right: 8%; aspect-ratio: 126.827 / 63.0563; background: #fff; -webkit-mask: url(../assets/logo-pulsion-studio-carre.svg) center / contain no-repeat; mask: url(../assets/logo-pulsion-studio-carre.svg) center / contain no-repeat; opacity: .75; filter: blur(1.5px) drop-shadow(0 10px 24px rgba(0, 91, 245, .25)); }
.duo-photo:has(img) { aspect-ratio: 1 / 1; }
.duo-photo img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: 94%; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(10, 10, 35, .18)); }
.duo-initiale { font-family: var(--font-serif); font-style: italic; font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: 1; color: var(--blue); opacity: .35; }

/* Appel final sans visuel (À propos : l'illustration visio montre Loïs) */
.cta-grid--solo { grid-template-columns: minmax(0, 1fr); }
.cta-grid--solo .cta-text { max-width: 820px; }

/* =====================================================================
   Écrans étroits
   ===================================================================== */
@media (max-width: 1000px) {
  .realisations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .contact-grid, .about-story { grid-template-columns: 1fr; }
  .contact-side { position: static; }
}
@media (max-width: 640px) {
  .realisations-grid { grid-template-columns: 1fr; }
  .duo, .choices { grid-template-columns: 1fr; }
  .contact-details { padding-inline: 4px; }
}

/* Contact : renvoi discret vers l'estimateur */
.contact-estimate { color: var(--muted); font-size: .95rem; line-height: 1.6; }