/* L'ACCUEIL CLAIR (lot 20, 03/10/2026) — ce qui n'appartient qu'à lui depuis que la page a UN sujet et UN public : les deux choses
   qu'on obtient, chacune avec ce qu'on en voit. Le premier écran, le parcours et le prix gardent leurs feuilles (accueil.css,
   vitrine.css) ; les sites d'exemple et les liens des métiers gardent accueil-reseau.css (lot 19). Charte : blanc, gris chauds, le
   vermillon seul accent, pas d'italique hors H1 et appel final. */

/* Les deux choses, le site et l'espace : la carte entière est la porte ; le visuel dit ce qu'on obtient avant le texte. */
.ac-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:40px 0 0;padding:0;list-style:none}
.ac-cartes>li{min-width:0}
.ac-carte{display:flex;flex-direction:column;height:100%;padding:0 0 22px;border:1px solid var(--filet-2);border-radius:18px;background:var(--fond);color:var(--encre);text-decoration:none;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.ac-carte:hover{border-color:var(--encre-3);box-shadow:0 14px 30px #1111130f}
.ac-carte:focus-visible{outline:3px solid var(--renard);outline-offset:4px}
.ac-visuel{position:relative;display:flex;align-items:flex-start;justify-content:center;height:250px;margin-bottom:20px;padding-top:26px;overflow:hidden;background:var(--sourd)}
/* Le haut de l'appareil se voit, le bas file sous la carte : on reconnaît un téléphone sans lire un écran entier. */
.ac-visuel img{display:block;width:54%;max-width:190px;height:auto;border:6px solid #1c1c1f;border-radius:26px;box-shadow:0 18px 36px #1111132e}
.ac-visuel-espace{background:var(--sourd-2)}
.ac-visuel-espace img{width:82%;max-width:300px;border-width:7px;border-radius:20px}
.ac-num{margin:0 22px;font:600 13px/1 var(--texte);letter-spacing:.08em;color:var(--encre-3)}
.ac-carte h3{margin:10px 22px 0;font-size:clamp(22px,1.9vw,26px);line-height:1.15}
.ac-carte h3+p{margin:10px 22px 0;font-size:15.5px;line-height:1.5;color:var(--encre-2)}
.ac-lien{display:inline-flex;align-items:center;gap:8px;margin:auto 22px 0;padding-top:18px;font-size:15px;font-weight:650;color:var(--encre);text-decoration:underline;text-underline-offset:4px}
.ac-lien svg{flex-shrink:0}
.ac-note{margin:18px 0 0;font-size:13px;color:var(--encre-3)}

/* Les exemples : la tête du bloc, titre à gauche, lien à droite. */
.ac-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:34px}
.ac-exemples .ar-sites{margin-bottom:0}
.ac-exemples .ac-note{margin:0 0 26px}


@media (max-width:900px){
  .ac-cartes{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
  .ac-visuel{height:200px}
  .ac-visuel img{width:44%}
  .ac-visuel-espace img{width:70%}
  .ac-tete{margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){.ac-carte{transition:none}}

/* Le titre du premier écran et l'appel final gardent l'italique Fraunces vermillon (décision du 24/09 : l'italique au H1, aux titres de
   pages et à l'appel final seulement) ; refonte.css (lot 15) l'avait éteint partout. Ailleurs, la fin d'un titre reste en gris. */
body.vitrine.accueil-clair .une h1 em,body.vitrine.accueil-clair .nv-final h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--renard)}

/* Un seul bouton plein, vermillon, pour un seul but : « Créer mon site », en haut et en bas (refonte.css passait l'appel final en noir). */
body.vitrine.accueil-clair .nv-final .nommer button{background:var(--renard)}
body.vitrine.accueil-clair .nv-final .nommer button:hover{background:var(--renard-fonce)}

/* Au téléphone, le premier écran montre les deux appareils sans leurs libellés : 44 mots au plus (sa règle du 24/09, contrôlée),
   et ce sont le titre, la phrase et le prix qui les portent. Les onglets passent sous l'image, à côté des deux portes ; « Restaurant
   Le Bistrot · Exemple fictif » laisse sa place à la ligne « Démonstration : restaurant, clients et chiffres fictifs. », juste dessous. */
@media (max-width:760px){
  .accueil-clair .produit-espace .appareils-espace{order:1}
  .accueil-clair .produit-espace .produit-explication{order:2}
  .accueil-clair .produit-espace .produit-commandes{order:3;margin-top:14px;margin-bottom:0}
  .accueil-clair .produit-espace .choix-demo{order:4}
  .accueil-clair .produit-espace .statut-demo{order:5}
  .accueil-clair .produit-espace .exemple-commun{display:none}
  /* Le titre, la phrase, le bouton et la ligne de prix font déjà 43 mots (mesurés rendus, en-tête compris) : l'image du produit y est
     donc muette au téléphone — les deux appareils, sans la barre de fenêtre, la pastille ni la demande qui vole. */
  .accueil-clair .produit-espace :is(.appareil-barre,.pastille-demande,.demande-volante){display:none}
  /* Les deux portes « Voir le site / Essayer l'espace pro » font le travail de la bascule 01/02 : au téléphone, une seule rangée. */
  .accueil-clair .produit-espace :is(.produit-commandes,.produit-explication){display:none!important}
}
/* Les deux portes de la démo au même style, en contour : la seule surface pleine de l'écran reste « Créer mon site ». */
body.vitrine.accueil-clair .choix-demo .gestion-directe{background:var(--fond);color:var(--encre);border:1px solid var(--filet-2)}
body.vitrine.accueil-clair .choix-demo .gestion-directe span{color:var(--encre-3)}