/* =====================================================================
   Studio Revo — grilles équilibrées
   Règle : le contenu dicte la grille. Aucune dernière rangée ne laisse
   de cellule vide ; les éléments restants s'élargissent pour la remplir.
   ===================================================================== */

/* ---------- .grid-balanced : 3 colonnes → 2 → 1, sans trou ----------
   Base 6 colonnes : chaque élément occupe 2 (= 3 par rangée).
   Reste 2 → les deux derniers occupent 3 + 3 (50/50).
   Reste 1 → le dernier occupe toute la largeur. */
.grid-balanced{display:grid; grid-template-columns:repeat(6,minmax(0,1fr));}
.grid-balanced > *{grid-column:span 2;}
.grid-balanced > :nth-last-child(2):nth-child(3n+1),
.grid-balanced > :last-child:nth-child(3n+2){grid-column:span 3;}
.grid-balanced > :last-child:nth-child(3n+1){grid-column:1 / -1;}

/* 4 éléments : 2 × 2 plutôt que 3 + 1 */
.grid-balanced.grid-balanced--pairs{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-balanced.grid-balanced--pairs > *,
.grid-balanced.grid-balanced--pairs > :nth-child(n){grid-column:auto;}

/* 8 éléments (couches) : 4 + 4 */
.grid-four{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}

@media (max-width:1024px){
  .grid-balanced,
  .grid-balanced.grid-balanced--pairs,
  .grid-four{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-balanced > *,
  .grid-balanced > :nth-last-child(2):nth-child(3n+1),
  .grid-balanced > :last-child:nth-child(3n+2){grid-column:auto;}
  .grid-balanced > :last-child:nth-child(3n+1){grid-column:auto;}
  /* nombre impair en 2 colonnes : le dernier prend toute la largeur */
  .grid-balanced > :last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (max-width:640px){
  .grid-balanced,
  .grid-balanced.grid-balanced--pairs,
  .grid-four{grid-template-columns:1fr;}
  .grid-balanced > *{grid-column:auto !important;}
}

/* Une carte de démo seule sur toute la largeur passe en mise en page horizontale
   (image à gauche, texte à droite) plutôt qu'une carte étirée.
   Desktop : seulement si le reste est 1 (3n+1). Tablette : si le nombre est impair. */
.mini-demo-grid .mini-demo.is-wide{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;}
.mini-demo-grid .mini-demo.is-wide img{height:100%; min-height:200px;}
.mini-demo-grid .mini-demo.is-wide .mini-demo-body{align-self:center; padding:28px 32px;}
@media (min-width:1025px){
  .mini-demo-grid.grid-balanced:not(.grid-balanced--pairs) > .mini-demo:last-child:nth-child(3n+1):not(:first-child){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;}
  .mini-demo-grid.grid-balanced:not(.grid-balanced--pairs) > .mini-demo:last-child:nth-child(3n+1):not(:first-child) img{height:100%; min-height:200px;}
  .mini-demo-grid.grid-balanced:not(.grid-balanced--pairs) > .mini-demo:last-child:nth-child(3n+1):not(:first-child) .mini-demo-body{align-self:center; padding:28px 32px;}
}
@media (min-width:641px) and (max-width:1024px){
  .mini-demo-grid.grid-balanced > .mini-demo:last-child:nth-child(odd):not(:first-child){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;}
  .mini-demo-grid.grid-balanced > .mini-demo:last-child:nth-child(odd):not(:first-child) img{height:100%; min-height:200px;}
  .mini-demo-grid.grid-balanced > .mini-demo:last-child:nth-child(odd):not(:first-child) .mini-demo-body{align-self:center; padding:28px 32px;}
}

/* ---------- Cartes de démonstration du hub (/labs) ---------- */
.labs-demo-grid{gap:24px;}
.labs-demo-grid > div > a{height:100%;}
.labs-demo-grid > div > a > div{height:100%; display:flex; flex-direction:column;}
.labs-demo-grid img{object-position:top left;}

/* ---------- Services (page Services) : images uniformes ---------- */
.svc-card img{width:100%; height:220px; object-fit:cover; object-position:top left; display:block; margin-bottom:22px; border:1px solid var(--line-light-strong);}
@media (min-width:761px){
  .svc-grid .svc-card:last-child:nth-child(odd){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:36px; align-items:center;}
  .svc-grid .svc-card:last-child:nth-child(odd) img{height:260px; margin-bottom:0;}
}

/* ---------- Index éditorial de liens (remplace les rangées de boutons qui cassent) ---------- */
.link-index{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-light-strong); max-width:760px;}
.link-index li{border-bottom:1px solid var(--line-light-strong);}
.link-index a{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:15px 2px; text-decoration:none; color:var(--ink-text); font-weight:600; font-size:15px; transition:color .15s, padding .15s;}
.link-index a .li-name{flex:0 0 260px;}
.link-index a span.li-desc{font-weight:400; color:var(--muted-ink); font-size:13.5px; flex:1;}
.link-index.link-index--wide{max-width:none;}
.link-index a::after{content:"→"; color:var(--burgundy); flex:none;}
.link-index a:hover{color:var(--burgundy); padding-left:8px;}
.link-index a:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}
@media (max-width:640px){ .link-index a span.li-desc{display:none;} .link-index a .li-name{flex:1;} }

/* « Voir aussi » : ligne typographique, pas une rangée de boutons */
.see-also{margin-top:36px; font-size:14px; color:var(--muted-ink); line-height:1.9;}
.see-also a{color:var(--ink-text); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-light-strong);}
.see-also a:hover{color:var(--burgundy); border-color:var(--burgundy);}
.see-also .sep{color:var(--line-light-strong); margin:0 10px;}

/* ---------- Séquences « avant / après » (Fondations) ----------
   Tablette large : étapes compactes sur une seule ligne. Tablette portrait et mobile : séquence verticale. */
@media (min-width:861px) and (max-width:1180px){
  .chip-flow{flex-wrap:nowrap !important; gap:5px !important; font-size:11px !important;}
  .chip-flow > span{white-space:nowrap;}
  .chip-flow > span:nth-child(odd){padding:6px 8px !important;}
}
@media (max-width:860px){
  .chip-flow{flex-direction:column !important; align-items:flex-start !important; gap:4px !important;}
  .chip-flow > span:nth-child(even){transform:rotate(90deg); display:inline-block; margin-left:14px;}
}

/* ---------- Pied de page ---------- */
.foot-services{display:block !important;}
.foot-services .fs-label{display:block; color:var(--muted-ink); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; margin-bottom:8px;}
.foot-services .fs-links{display:flex; flex-wrap:wrap; gap:6px 22px;}
/* Tablette : liste en deux colonnes de texte (3 + 2), jamais un lien isolé sous une rangée */
@media (max-width:1024px){ .foot-services .fs-links{display:block; columns:2; column-gap:40px; max-width:560px;} .foot-services .fs-links a{display:block; padding:3px 0; break-inside:avoid;} }
@media (max-width:640px){ .foot-services .fs-links{columns:1;} }
@media (max-width:900px){
  footer .foot-grid{flex-direction:column; align-items:flex-start;}
}

/* ---------- Rangée de confiance (AI Ready Score) ---------- */
@media (max-width:480px){
  .trust-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .trust-row .dot{display:none;}
}

/* ---------- Contact : formulaire + colonne latérale ----------
   La colonne fixe de 380 px débordait de l'écran sous 800 px (défilement horizontal).
   Sous 860 px, la colonne latérale passe sous le formulaire. */
@media (max-width:860px){
  [style*="grid-template-columns:1fr 380px"]{grid-template-columns:1fr !important; gap:40px !important;}
}

/* Hub des démos, tablette : la 5e carte (pleine largeur) passe en horizontal */
@media (min-width:641px) and (max-width:1024px){
  .labs-demo-grid > div:last-child:nth-child(odd) > a > div{flex-direction:row;}
  .labs-demo-grid > div:last-child:nth-child(odd) img{width:50% !important; height:auto !important; min-height:220px; flex:none;}
  .labs-demo-grid > div:last-child:nth-child(odd) > a > div > div{align-self:center;}
}