/* ==========================================================================
   layout.css — conteneurs, rythme des sections, grilles
   ========================================================================== */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:900px}
.wrap--text{max-width:820px}

section{padding:104px 0}

/* Deux colonnes texte / visuel */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}

/* Grille des cartes de fonctionnalités */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* Grille de la politique : sommaire + corps */
.policy-grid{display:grid;grid-template-columns:230px 1fr;gap:52px;align-items:start}

/* Coordonnées de contact */
.contact-rows{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:34px}

/* ==========================================================================
   Points de rupture
   ========================================================================== */

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:52px}
  .split--reverse .phones{order:2}   /* le visuel repasse sous le texte */
  .policy-grid{grid-template-columns:1fr;gap:34px}
  .toc{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
}

@media (max-width:720px){
  :root{--gutter:20px;--nav-h:64px}
  body{font-size:16px}
  section{padding:68px 0}
  h2{font-size:29px}
  .cards{grid-template-columns:1fr}
  .contact-rows{grid-template-columns:1fr}
  .toc{grid-template-columns:1fr}
}