/* ==========================================================================
   Groupe « Développement » : developpement-commercial et ses 4 sous-pages.
   Compléments de mise en page uniquement (préfixe g-developpement-). Aucun
   composant partagé n'est redéfini : tout le reste vient de site.css.
   Chargé après site.css (extra_css) ; toutes les couleurs sont des variables.
   ========================================================================== */

/* Colonnes desserrées pour les mises en page titre / texte */
.g-developpement-split{gap:clamp(2rem,5vw,4.5rem)}
/* colonne de titre étroite : corps réduit pour éviter les titres sur 5 lignes */
.g-developpement-split .section-title{font-size:clamp(1.9rem,1rem + 2.6vw,3rem)}
@media (max-width:860px){.g-developpement-split{gap:0}.g-developpement-split .rule{margin-bottom:1.75rem}}

/* Colonne de titre qui reste en vue pendant la lecture (grand écran) */
@media (min-width:861px){.g-developpement-sticky{position:sticky;top:7rem}}

/* Chiffre décoratif à côté d'un titre (13 départements, 3 mois) : aria-hidden dans le balisage */
.g-developpement-figure{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.g-developpement-bignum{display:block;font-family:var(--font-head);font-weight:900;font-size:clamp(6rem,3rem + 12vw,13rem);line-height:.8;letter-spacing:-.02em;color:color-mix(in srgb,var(--accent-on-light) 78%,#fff);user-select:none}
@media (max-width:760px){
  .g-developpement-figure{grid-template-columns:minmax(0,1fr);gap:1rem}
  .g-developpement-bignum{font-size:6rem}
}

/* Frise verticale d'étapes : ol.steps dont chaque li porte un h3 et 1 ou 2 paragraphes */
.g-developpement-steps{gap:0}
.g-developpement-steps>li{padding:1.9rem 0 1.9rem 4.4rem;border-top:1px solid var(--line)}
.g-developpement-steps>li:last-child{border-bottom:1px solid var(--line)}
.g-developpement-steps>li::before{top:1.75rem;font-size:2.6rem}
.g-developpement-steps h3{margin-bottom:.7rem;font-weight:700;font-size:1.45rem;letter-spacing:.05em;line-height:1.15}
.g-developpement-steps p{color:var(--fg)}
.g-developpement-steps p+p{margin-top:.8rem}

/* Étapes en éditorial, 2 colonnes (steps--row desserré) */
.g-developpement-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem clamp(2rem,5vw,4rem)}
.g-developpement-steps-grid>li{padding-top:1.6rem}
.g-developpement-steps-grid .step__title{margin:.4rem 0 .8rem;font-size:1.5rem;letter-spacing:.04em}
.g-developpement-steps-grid p{font-size:1rem;line-height:1.7;color:var(--fg)}
@media (max-width:640px){.g-developpement-steps-grid{grid-template-columns:minmax(0,1fr)}}

/* Cartes numérotées en lignes larges : numéro et titre à gauche, texte à droite */
.g-developpement-rows{grid-template-columns:minmax(0,1fr)}
.g-developpement-rows .num-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,5vw,4rem);align-items:start;padding:2rem clamp(1.5rem,4vw,2.5rem)}
.g-developpement-rows .num-card__num{grid-column:1;grid-row:1;margin-bottom:.6rem}
.g-developpement-rows .num-card__title{grid-column:1;grid-row:2;margin:0;font-size:1.5rem}
.g-developpement-rows .num-card p{grid-column:2;grid-row:1 / span 2;font-size:1rem}
@media (max-width:760px){.g-developpement-rows .num-card{display:flex}.g-developpement-rows .num-card__title{margin-bottom:.8rem}}

/* Phrases isolées en cartes à liseré : texte plus grand */
.g-developpement-statements .card{padding:1.75rem}
.g-developpement-statements .card p{font-size:1.12rem;line-height:1.6;color:var(--text-light)}

/* Liste de preuves sur deux colonnes */
.g-developpement-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem clamp(2rem,5vw,4rem)}
@media (max-width:760px){.g-developpement-cols{grid-template-columns:minmax(0,1fr)}}

/* Phrase forte sous une grille de cartes */
.g-developpement-outro{margin-top:clamp(2rem,5vw,3rem)}

/* « Voir aussi » : rangée de liens en cartes à liseré */
.g-developpement-see-head{margin-bottom:2rem}
.g-developpement-see-head .section-title{margin-bottom:0;font-size:clamp(1.8rem,1.2rem + 2vw,2.5rem)}
.g-developpement-see-head .rule{margin-top:1.25rem}
.g-developpement-see{gap:1.25rem}
.g-developpement-see li{display:flex}
.g-developpement-see .card{flex:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.4rem}
.g-developpement-see .card__title{margin:0;font-size:1.05rem}
.g-developpement-see .card__more{margin:0;flex:none;font-size:1.2rem;line-height:1;transition:transform .2s}
.g-developpement-see .card:hover .card__more{transform:translateX(4px)}