/* Aurora : accueil réorganisé (en ligne depuis le 04/11/2026), en complément de page.css. Chargé par l'accueil seulement.
   Problèmes qui mènent chacun à leur service, comparatif agence / Aurora, Divi en un bloc, projets perso en vitrine. */

.cache-visuel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Rythme : sections un peu moins hautes (160 → 128 px au bureau, 112 → 96 en tablette, 80 → 72 sur mobile) */
:root { --section-desktop: 128px; --section-tablette: 96px; --section-mobile: 72px; }

/* ---------- Problèmes : la carte entière mène au service qui règle le problème ---------- */
.problemes__grille .probleme { gap: var(--espace-2); min-height: 0; }
.probleme__tete { display: flex; flex-direction: column; gap: var(--espace-3); margin-bottom: var(--espace-1); }
.probleme > .corps { flex: 1; }
.probleme__solution { flex-wrap: wrap; column-gap: 6px; margin-top: var(--espace-1); padding-top: var(--espace-2); border-top: 1px solid var(--ligne); font-weight: 600; transition: color var(--au-duree-carte) var(--au-ease), border-color var(--au-duree-carte) var(--au-ease); }
.probleme__solution::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.probleme__etiquette { color: var(--au-texte); font-weight: 400; transition: color var(--au-duree-carte) var(--au-ease); }
.probleme:hover, .probleme:focus-within { --au-fond: var(--violet); --au-titre: var(--nuit); --au-texte: var(--nuit); --au-forme: var(--nuit); --au-lien: var(--nuit); border-color: var(--violet); }
.probleme:hover .probleme__solution, .probleme:focus-within .probleme__solution { border-top-color: #19004640; }
.probleme:hover .au-lien__fleche { transform: translateX(4px); }
.probleme:focus-within { outline: 2px solid var(--blanc); outline-offset: 3px; }
.probleme__solution:focus-visible { outline: none; }
@media (max-width: 809px) {
  .probleme__tete { flex-direction: row; align-items: center; gap: var(--espace-2); margin-bottom: 0; }
  .probleme__tete .au-icone { width: 28px; height: 28px; }
}

/* ---------- Comparatif : une agence web / Aurora ---------- */
.comparatif__entete { display: grid; grid-template-columns: 7fr 5fr; gap: var(--espace-4) var(--gouttiere); align-items: end; }
.comparatif__entete > .corps-l { max-width: 480px; justify-self: end; color: var(--texte-secondaire); }
.comparatif__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparatif__table th, .comparatif__table td { padding: var(--espace-3) var(--espace-4); text-align: left; vertical-align: top; font-weight: inherit; }
.comparatif__table thead th, .comparatif__table thead td { vertical-align: bottom; }
.comparatif__table thead .comparatif__eux { padding-bottom: var(--espace-2); color: var(--texte-secondaire); font-family: var(--font-titres); font-weight: 600; font-size: 20px; }
.comparatif__table thead .comparatif__nous { padding-top: var(--espace-3); padding-bottom: var(--espace-1); border-radius: var(--rayon-carte) var(--rayon-carte) 0 0; }
.comparatif__table thead td { width: 24%; }
.comparatif__table thead .comparatif__eux { width: 34%; }
.comparatif__table tbody th { padding-left: 0; border-top: 1px solid var(--ligne); color: var(--blanc); font-family: var(--font-titres); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.comparatif__table td > span { display: block; }
.comparatif__table tbody td.comparatif__eux { border-top: 1px solid var(--ligne); color: var(--texte-secondaire); }
.comparatif__table tbody td.comparatif__nous { border-top: 1px solid var(--ligne-nuit); color: var(--blanc); }
.comparatif__nous { background: var(--nuit); }
.comparatif__table tbody tr:last-child .comparatif__nous { border-radius: 0 0 var(--rayon-carte) var(--rayon-carte); padding-bottom: var(--espace-4); }
.comparatif__table tbody td { position: relative; padding-left: calc(var(--espace-4) + 32px); }
.comparatif__marque { position: absolute; left: var(--espace-4); top: calc(var(--espace-3) + 0.15em); width: 20px; height: 20px; }
.comparatif__eux .comparatif__marque { color: #ffffff66; }
.comparatif__nous .comparatif__marque { color: var(--violet); }
.comparatif__logo { font-size: 32px; padding-block: 0; color: var(--blanc); }
.comparatif__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-4); margin-top: var(--espace-6); }
.comparatif__bas .corps-l { max-width: 560px; color: var(--blanc); }
@media (max-width: 1199px) {
  .comparatif__entete { grid-template-columns: minmax(0, 1fr); }
  .comparatif__entete > .corps-l { justify-self: start; }
  .comparatif__table th, .comparatif__table td { padding: var(--espace-3); }
  .comparatif__table tbody td { padding-left: calc(var(--espace-3) + 30px); }
  .comparatif__marque { left: var(--espace-3); }
}
@media (max-width: 809px) {
  .comparatif__table, .comparatif__table tbody, .comparatif__table tr { display: block; }
  .comparatif__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .comparatif__table tbody tr { display: grid; gap: var(--espace-1); padding: var(--espace-4) 0; border-top: 1px solid var(--ligne); }
  .comparatif__table tbody tr:last-child { border-bottom: 1px solid var(--ligne); }
  .comparatif__table tbody th, .comparatif__table tbody td, .comparatif__table tbody td.comparatif__eux, .comparatif__table tbody td.comparatif__nous { display: block; border-top: 0; }
  .comparatif__table tbody th { padding: 0 0 var(--espace-1); }
  .comparatif__table tbody td { padding: var(--espace-2) var(--espace-2) var(--espace-2) calc(var(--espace-2) + 30px); }
  .comparatif__table tbody td::before { content: attr(data-etiquette); display: block; margin-bottom: 2px; font-size: 14px; line-height: 1.4; }
  .comparatif__table tbody td.comparatif__eux::before { color: #ffffff99; }
  .comparatif__table tbody td.comparatif__nous::before { color: var(--violet); font-weight: 600; }
  .comparatif__table tbody td.comparatif__nous, .comparatif__table tbody tr:last-child .comparatif__nous { border-radius: var(--rayon-petit); padding-bottom: var(--espace-2); }
  .comparatif__table tbody td.comparatif__eux { padding: 0 0 var(--espace-1) 30px; }
  .comparatif__eux .comparatif__marque { left: 0; top: 23px; }
  .comparatif__nous .comparatif__marque { left: var(--espace-2); top: calc(var(--espace-2) + 23px); }
  .comparatif__bas .au-btn { width: 100%; }
}

/* ---------- Divi : un seul bloc, sans les 4 cartes ---------- */
.divi--court .section__entete { margin-bottom: 0; }
.divi--court .divi__bas { margin-top: var(--espace-6); }

/* ---------- Projets perso : vitrine (liste à gauche, grande capture à droite) ---------- */
.perso-court__entete { display: grid; grid-template-columns: 7fr 5fr; gap: var(--espace-4) var(--gouttiere); align-items: end; margin-bottom: var(--espace-8); }
.perso-court__entete > .corps-l { max-width: 480px; justify-self: end; color: var(--texte-secondaire); }
.vitrine__corps { display: grid; grid-template-columns: 5fr 7fr; gap: var(--espace-8); align-items: start; }
.vitrine__liste { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ligne-nuit); }
.vitrine__item { position: relative; border-top: 1px solid var(--ligne-nuit); }
.vitrine__capture { display: none; }
.vitrine__onglet { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); width: 100%; min-height: 72px; padding: var(--espace-2) 0; border: 0; background: none; color: var(--texte-secondaire); font: inherit; text-align: left; cursor: pointer; }
.vitrine__nom { display: inline-flex; align-items: center; color: inherit; transition: color var(--au-duree-carte) var(--au-ease); }
.vitrine__nom::before { content: ""; flex: none; width: 0; height: 12px; margin-right: 0; background: var(--violet); transition: width 0.4s var(--au-ease), margin-right 0.4s var(--au-ease); }
.vitrine__statut { display: inline-flex; flex: none; align-items: center; gap: var(--espace-1); color: var(--texte-secondaire); }
.vitrine__statut i { width: var(--carre); height: var(--carre); background: var(--violet); }
.vitrine__statut--interne i { background: transparent; box-shadow: inset 0 0 0 1px var(--violet); }
.vitrine__progression { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--violet); transform: scaleX(0); transform-origin: left; }
.vitrine__onglet:hover, .vitrine__item.est-actif .vitrine__onglet { color: var(--blanc); }
.vitrine__item.est-actif .vitrine__nom::before { width: 12px; margin-right: 14px; }
.vitrine__item.est-actif .vitrine__progression { transform: scaleX(1); }
.vitrine__corps.en-lecture .vitrine__item.est-actif .vitrine__progression { animation: vitrine-progression var(--vitrine-duree, 7s) linear both; }
@keyframes vitrine-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vitrine__onglet:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.vitrine__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--au-ease); }
.vitrine__detail-dedans { min-height: 0; overflow: hidden; }
.vitrine__item.est-actif .vitrine__detail, html:not(.js) .vitrine__detail { grid-template-rows: 1fr; }
.vitrine__texte { max-width: 52ch; margin: 0 0 var(--espace-2); color: var(--texte-secondaire); }
.vitrine__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1) 12px; margin: 0 0 var(--espace-3); }
.vitrine__meta .au-pastille { height: 32px; border-color: var(--ligne-nuit); }
.vitrine__lien { min-height: 32px; margin-left: var(--espace-1); }
.vitrine__lien svg { width: 18px; height: 18px; transition: transform var(--au-duree-survol) var(--au-ease); }
.vitrine__lien:hover svg { transform: translate(2px, -2px); }
.vitrine__fenetre { position: sticky; top: 120px; border: 1px solid var(--ligne-nuit); border-radius: var(--rayon-image); overflow: hidden; background: var(--noir); box-shadow: 0 32px 64px -24px #00000080; }
.vitrine__barre { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--espace-2); border-bottom: 1px solid var(--ligne-nuit); color: var(--texte-secondaire); }
.vitrine__barre i { width: var(--carre); height: var(--carre); background: var(--ligne-nuit); }
.vitrine__barre span { margin-left: var(--espace-1); }
.vitrine__ecrans { position: relative; aspect-ratio: 16 / 10; }
.vitrine__ecran { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.03); transition: opacity 0.6s var(--au-ease), transform 1.2s var(--au-ease); }
.vitrine__ecran.est-actif { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vitrine__detail, .vitrine__ecran, .vitrine__nom::before { transition: none; }
  .vitrine__corps.en-lecture .vitrine__item.est-actif .vitrine__progression { animation: none; }
}
/* Sous 1200 px : plus de fenêtre, chaque projet devient une carte avec sa capture, à faire défiler */
@media (max-width: 1199px) {
  .perso-court__entete { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--espace-6); }
  .perso-court__entete > .corps-l { justify-self: start; }
  .vitrine__corps { display: block; }
  .vitrine__fenetre { display: none; }
  .vitrine__liste { display: flex; gap: var(--gouttiere); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge-tablette); margin-inline: calc(-1 * var(--marge-tablette)); padding: 0 var(--marge-tablette) var(--espace-2); border: 0; scrollbar-width: thin; scrollbar-color: var(--ligne-nuit) transparent; }
  .vitrine__item { display: flex; flex-direction: column; flex: 0 0 min(340px, 80vw); border: 1px solid var(--ligne-nuit); border-radius: var(--rayon-carte-mobile); overflow: hidden; background: #ffffff08; scroll-snap-align: start; }
  .vitrine__capture { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--ligne-nuit); }
  .vitrine__onglet { min-height: 0; padding: var(--espace-3) var(--espace-3) var(--espace-1); color: var(--blanc); cursor: default; pointer-events: none; }
  .vitrine__nom::before, .vitrine__progression { display: none; }
  .vitrine__detail { flex: 1; grid-template-rows: 1fr; }
  .vitrine__detail-dedans { display: flex; flex-direction: column; height: 100%; padding: 0 var(--espace-3); }
  .vitrine__meta { margin-top: auto; }
}
@media (max-width: 809px) {
  .vitrine__liste { scroll-padding-inline: var(--marge-mobile); margin-inline: calc(-1 * var(--marge-mobile)); padding-inline: var(--marge-mobile); }
  .vitrine__onglet { flex-wrap: wrap; row-gap: 4px; }
}