/* Page « Création de site internet » : compléments aux briques communes de style.css.
   Rien ici ne touche l'accueil : tout est limité aux classes de la page. */

/* bouton sous le chapeau de l'en-tête */
.tete-page .ouverture__boutons { margin-top: 26px; }

/* blocs plus serrés : Paul trouve vite que ça « prend trop de place » */
.bloc { padding-block: clamp(56px, 9vh, 96px); }

/* titre à gauche (qui reste en vue), texte à droite */
.deux-colonnes--titre { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.deux-colonnes--titre > .entete { position: sticky; top: 110px; margin: 0; }
.deux-colonnes .entete { margin-bottom: 18px; }
.deux-colonnes .titre-section { font-size: clamp(28px, 3.2vw, 44px); max-width: 16ch; }
.prose > p:first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
@media (max-width: 860px) { .deux-colonnes--titre { grid-template-columns: 1fr; } .deux-colonnes--titre > .entete { position: static; } }

/* deux sujets côte à côte, séparés par un filet */
.paire > * + * { border-left: 1px solid var(--trait); padding-left: clamp(24px, 4vw, 60px); }
.bloc--papier .paire > * + * { border-color: rgba(49,40,93,.14); }
@media (max-width: 860px) { .paire > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--trait); padding-top: 40px; } .bloc--papier .paire > * + * { border-color: rgba(49,40,93,.14); } }

/* rangée de prix : le montant en grand, le libellé dessous */
.prix-ligne { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.prix-ligne li { padding: 22px 20px; border-radius: 18px; border: 1px solid var(--trait); display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.prix-ligne b { font: 800 clamp(34px, 3.4vw, 46px)/1 var(--serif); letter-spacing: -.03em; }
.prix-ligne b small { font: 500 15px/1 var(--sans); letter-spacing: 0; color: var(--doux); margin-right: 4px; }
.prix-ligne span { color: var(--doux); font-size: 15px; line-height: 1.4; }
.prix-ligne .est-option { border-style: dashed; background: none; }
.bloc--papier .prix-ligne li { background: #fff; border-color: rgba(49,40,93,.12); box-shadow: 0 14px 40px rgba(49,40,93,.08); }
.bloc--papier .prix-ligne b small, .bloc--papier .prix-ligne span { color: #4d4868; }

/* cartes « ce qu'il y a dans votre site » : sans la marge latérale de l'accueil */
.bloc .cadres { padding: 0; margin: 28px 0; }

/* FAQ : la liste à droite, l'en-tête à gauche */
.bloc .faq__liste .question:first-child summary { padding-top: 0; }

/* bandeau d'appel : les liens « voir aussi » */
.appel__voir { margin: 26px auto 0 !important; font-size: 14.5px; }
.appel__voir a { color: #fff; }
.appel .appel__voir { max-width: 70ch; }

/* téléphone : plus serré (Paul trouve vite que ça « prend trop de place ») */
@media (max-width: 560px) {
  .deux-colonnes { gap: 18px; }
  .bloc .cadres { gap: 10px; }
  .bloc .cadre { padding: 20px 18px; }
  .bloc .cadre__icone { width: 32px; height: 32px; margin-bottom: 12px; }
  .prix-ligne { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prix-ligne li { padding: 16px 14px; }
}