/* ARYA, la vitrine. La charte est celle de l'application : l'azur du logo pour
   les aplats et les grands chiffres, l'azur assombri pour le texte et les
   commandes (l'azur du logo est illisible en texte), un blanc cassé pour le fond. */
:root {
  --azur: #23A9E1;
  --azur-50: #EAF7FD;
  --azur-100: #CCEBF8;
  --azur-700: #16698C;
  --azur-800: #125571;
  --azur-900: #0E4257;
  --gris: #D1D0D7;
  --fond: #FAF9F6;
  --surface: #FFFFFF;
  --encre: #1C2233;
  --crayon: #5B6475;
  --filet: #DDE3EC;
  --positif: #1F7A4D;
  --rayon: 18px;
  --largeur: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* La hauteur suit la largeur : les dimensions du HTML ne servent qu'à réserver la place. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azur-700); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 84px 0; }
.section--blanche { background: var(--surface); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.surtitre { color: var(--azur-700); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6em; }
.chapeau { color: var(--crayon); font-size: 1.12rem; max-width: 46em; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; background: rgba(250, 249, 246, .92);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--filet); }
.entete .conteneur { display: flex; align-items: center; gap: 16px; height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre);
  font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; }
.marque img { width: 38px; height: 38px; border-radius: 10px; }
.entete nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.entete nav a.lien { color: var(--crayon); text-decoration: none; font-weight: 600; font-size: .95rem; }
.entete nav a.lien:hover { color: var(--azur-700); }
.langues { display: flex; border: 1px solid var(--filet); border-radius: 999px; overflow: hidden; }
.langues a, .langues span { padding: 4px 12px; font-size: .85rem; font-weight: 700; text-decoration: none; }
.langues span { background: var(--azur-50); color: var(--azur-800); }
.langues a { color: var(--crayon); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 14px;
  background: var(--azur-700); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--azur-700); }
.bouton:hover { background: var(--azur-800); border-color: var(--azur-800); }
.bouton--clair { background: transparent; color: var(--azur-700); }
.bouton--clair:hover { background: var(--azur-50); }
.bouton--petit { padding: 8px 16px; font-size: .92rem; border-radius: 12px; }

/* Ouverture */
.ouverture { padding: 72px 0 64px; overflow-x: hidden; }
.ouverture .conteneur { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.ouverture h1 em { font-style: normal; color: var(--azur-700); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rassurance { margin-top: 18px; color: var(--crayon); font-size: .95rem; }
.telephone { position: relative; justify-self: center; width: min(320px, 80vw); }
.telephone::before { content: ""; position: absolute; inset: 8% -14% -6% -14%; background: var(--azur-100);
  border-radius: 40% 40% 32% 32%; z-index: -1; }
.ecran { border-radius: 30px; border: 8px solid var(--encre); overflow: hidden; background: var(--surface);
  box-shadow: 0 24px 60px rgba(14, 66, 87, .22); }

/* Le problème */
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.carte { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 26px; }
.section--blanche .carte { background: var(--fond); }
.carte p { color: var(--crayon); margin: 0; }
.pictogramme { width: 46px; height: 46px; border-radius: 12px; background: var(--azur-50); color: var(--azur-700);
  display: grid; place-items: center; margin-bottom: 14px; }
.pictogramme svg { width: 24px; height: 24px; }

/* Garanties */
.garanties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }

/* Démonstration en images */
.vitrine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.vitrine figure { margin: 0; }
.vitrine .ecran { border-width: 6px; border-radius: 24px; }
.vitrine figcaption { margin-top: 14px; color: var(--crayon); font-size: .95rem; text-align: center; }
.vitrine figcaption strong { display: block; color: var(--encre); }

/* Étapes */
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.etapes li { list-style: none; counter-increment: etape; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--azur); color: #fff; font-weight: 800; margin-bottom: 14px; }
ol.etapes { padding: 0; }

/* Tarif */
.tarif { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.prix { background: var(--azur-900); color: #fff; border-radius: 24px; padding: 36px; }
.prix .montant { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; color: #fff; }
.prix .montant small { font-size: 1.1rem; font-weight: 600; }
.prix .unite { color: var(--azur-100); margin: 8px 0 22px; }
.prix ul { margin: 0; padding-left: 1.1em; color: #E7F4FA; }
.prix li { margin-bottom: 6px; }

/* Contact */
.appel { background: var(--azur-700); color: #fff; border-radius: 28px; padding: 56px 40px; text-align: center; }
.appel h2 { color: #fff; }
.appel p { color: #E7F4FA; max-width: 40em; margin: 0 auto 26px; }
.appel .bouton { background: #fff; color: var(--azur-800); border-color: #fff; }
.appel .bouton:hover { background: var(--azur-50); }
.appel .courriel { display: block; margin-top: 16px; color: #fff; font-weight: 600; }

/* Pied */
.pied { padding: 36px 0 44px; color: var(--crayon); font-size: .92rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.pied .signature { max-width: 44em; }

@media (max-width: 900px) {
  .ouverture .conteneur, .tarif { grid-template-columns: 1fr; }
  .trois, .garanties, .etapes, .vitrine { grid-template-columns: 1fr; }
  .vitrine { max-width: 340px; margin-left: auto; margin-right: auto; }
  .entete nav a.lien { display: none; }
  .section { padding: 64px 0; }
  .appel { padding: 44px 22px; }
}

/* Sur un téléphone, l'en-tête garde la marque et la langue : l'appel à
   l'action est juste en dessous, dans l'ouverture. */
@media (max-width: 600px) {
  .entete .bouton { display: none; }
  .actions .bouton { width: 100%; justify-content: center; }
}