/* Site vitrine d'AmI : les couleurs et la police de l'application (piste « Beurre »). */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/polices/ibm-plex-sans.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --fond: #fff;
  --farine: #f6f2e9;
  --panneau: #efe8da;
  --bordure: #e6dece;
  --bordure-forte: #dcd2bf;
  --contour: #c9bca3;
  --bord-champ: #8a7a66;
  --texte: #241a10;
  --texte-doux: #4d3e2f;
  --discret: #6a5b49;
  --beurre: #ffd970;
  --beurre-doux: #fff1c2;
  --dore: #e8a33d;
  --lien: #8a4f12;
  --vert: #2f6b4f;
  --vert-fond: #e3f0e8;
  --rouge: #a33a26;
  --rouge-fond: #f8e1dc;
  --rayon: 10px;
  --gouttiere: 16px;
}

@media (min-width: 768px) {
  :root { --gouttiere: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 1.0625rem/1.6 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (min-width: 768px) {
  body { font-size: 1.125rem; }
}

img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); }
h3, .h3 { font-size: 1.25rem; line-height: 1.3; }
.titre-page { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.025em; }
p, ul, ol, figure { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--texte); }
:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.saut {
  position: absolute;
  top: -6rem;
  left: var(--gouttiere);
  z-index: 20;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  background: var(--texte);
  color: var(--beurre);
}
.saut:focus { top: 0.75rem; }

.conteneur { width: min(100% - 2 * var(--gouttiere), 1120px); margin-inline: auto; }
.colonne > * { max-width: 46rem; }
.section { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.section-farine { background: var(--farine); }
.section-tete { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-suite { padding-top: 0; }
.intro { max-width: 42rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--texte-doux); }
.texte-courant > * + * { margin-top: 1rem; }
.texte-courant > h2 + * { margin-top: 1.25rem; }
.legende { margin-top: 1.25rem; font-size: 0.875rem; color: var(--discret); }

/* Boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 2px solid var(--texte);
  border-radius: var(--rayon);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bouton-plein { background: var(--texte); color: var(--beurre); }
.bouton-plein:hover { border-color: #3b2c1d; background: #3b2c1d; color: var(--beurre); }
.bouton-trait { background: var(--fond); color: var(--texte); }
.bouton-trait:hover { background: var(--farine); color: var(--texte); }
.bouton:disabled { opacity: 0.6; cursor: progress; }

/* En-tête */

.entete { position: sticky; top: 0; z-index: 10; background: var(--fond); border-bottom: 1px solid var(--bordure); }
.entete-ligne { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; }
.logo { color: var(--texte); font-size: 1.625rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-decoration: none; }
.logo:hover { color: var(--texte); }
.logo .m { font-size: 0.68em; color: var(--dore); }
.nav-large { display: none; margin-left: auto; }
.nav-large ul { display: flex; gap: 1.75rem; padding: 0; list-style: none; }
.nav-large a { color: var(--texte-doux); font-size: 1rem; text-decoration: none; }
.nav-large a:hover { color: var(--texte); text-decoration: underline; }
.nav-large a[aria-current], .menu a[aria-current] { color: var(--texte); font-weight: 600; }
.menu { margin-left: auto; }
.menu summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.45rem 0.9rem; border: 2px solid var(--texte); border-radius: var(--rayon); font-size: 0.9375rem; font-weight: 600; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: '+'; font-size: 1.125rem; font-weight: 400; line-height: 1; }
.menu[open] summary::after { content: '−'; }
.menu nav { position: absolute; top: 100%; right: 0; left: 0; padding: 0.25rem var(--gouttiere) 1rem; border-bottom: 1px solid var(--bordure-forte); background: var(--fond); }
.menu ul { max-width: 1120px; margin: 0 auto; padding: 0; list-style: none; }
.menu a { display: flex; align-items: center; min-height: 3rem; border-bottom: 1px solid var(--bordure); color: var(--texte-doux); font-size: 1.0625rem; text-decoration: none; }
.bouton-entete { min-height: 2.75rem; padding: 0.45rem 1rem; font-size: 0.9375rem; }
.libelle-court { display: none; }

@media (max-width: 479px) {
  .libelle-long { display: none; }
  .libelle-court { display: inline; }
}

@media (max-width: 359px) {
  .bouton-entete { display: none; }
}

@media (min-width: 960px) {
  .entete-ligne { gap: 1.5rem; }
  .nav-large { display: block; }
  .menu { display: none; }
}

/* Écrans d'AmI dans un téléphone : le cadre s'arrête sur la ligne en dessous. */

.telephone {
  overflow: hidden;
  border: 8px solid var(--texte);
  border-bottom: 0;
  border-radius: 2.25rem 2.25rem 0 0;
  background: var(--fond);
}
.telephone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telephone-entier { border-bottom: 8px solid var(--texte); border-radius: 2.25rem; }
.telephone-entier img { height: auto; }

/* Accroche */

.accroche { overflow: hidden; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); background: var(--beurre); }
.accroche-grille { display: grid; gap: 2.5rem; }
.accroche h1 { font-size: clamp(2.375rem, 1.3rem + 4.6vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.accroche h1 span { display: block; }
.accroche h1 .accroche-quoi { margin-bottom: 1rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.3; letter-spacing: 0; color: var(--texte-doux); }
.accroche-intro { max-width: 34rem; margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); color: var(--texte-doux); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.accroche-zone { max-width: 34rem; margin-top: 1.25rem; font-size: 0.9375rem; color: var(--texte-doux); }
.accroche-telephone { justify-self: center; width: min(78vw, 300px); height: clamp(22rem, 95vw, 30rem); }

@media (min-width: 900px) {
  .accroche-grille { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 4rem; align-items: end; }
  .accroche-texte { padding-bottom: clamp(3rem, 6vw, 6rem); }
  .accroche-telephone { width: 20rem; height: 34rem; }
}

/* Une journée avec AmI */

.journee { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: 0; list-style: none; border-top: 1px solid var(--bordure-forte); }
.moment { display: grid; gap: 1.25rem; padding-top: 2.5rem; border-bottom: 1px solid var(--bordure-forte); }
.heure { font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.moment-texte p { max-width: 34rem; margin-top: 0.5rem; color: var(--texte-doux); }
.moment .telephone { justify-self: center; width: min(64vw, 15rem); height: 20rem; margin-top: 0.5rem; }

@media (min-width: 900px) {
  .moment { grid-template-columns: 9rem minmax(0, 1fr) 16rem; column-gap: 3rem; padding-top: 3.5rem; }
  .heure { font-size: 2.25rem; }
  .moment-texte { padding-bottom: 3rem; }
  .moment .telephone { align-self: end; width: 16rem; height: 22rem; margin-top: 0; }
}

/* Tout ce que fait AmI */

.familles { display: grid; column-gap: 3rem; margin-top: 3rem; }
.famille { padding-block: 1.5rem; border-top: 1px solid var(--bordure-forte); }
.famille p { margin-top: 0.5rem; color: var(--texte-doux); }

@media (min-width: 768px) {
  .familles { grid-template-columns: 1fr 1fr; }
}

.roles { display: grid; gap: 1rem; margin-top: 2.5rem; }
.role { padding: 1.5rem; border-radius: var(--rayon); background: var(--farine); }
.role p { margin-top: 0.5rem; color: var(--texte-doux); }
.rangees { border-top: 1px solid var(--bordure-forte); }
.rangee { display: grid; gap: 1.25rem; padding-top: 2.5rem; border-bottom: 1px solid var(--bordure-forte); }
.rangee h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.rangee-texte > * + * { margin-top: 1rem; }
.rangee-texte > p { max-width: 38rem; color: var(--texte-doux); }
.rangee .telephone { justify-self: center; width: min(64vw, 15rem); height: 20rem; }

@media (min-width: 768px) {
  .roles { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .rangee { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: 4rem; padding-top: 3.5rem; }
  .rangee-texte { padding-bottom: 3rem; }
  .rangee .telephone { align-self: end; width: 16rem; height: 22rem; }
}

/* Conseils */

.conseils { display: grid; gap: 1rem; margin-top: 2rem; }
.conseil { display: block; padding: 1.5rem; border: 1px solid var(--bordure-forte); border-radius: var(--rayon); background: var(--fond); color: var(--texte); text-decoration: none; }
.conseil:hover { border-color: var(--texte); color: var(--texte); }
.conseil strong { display: block; font-size: 1.1875rem; font-weight: 600; }
.conseil span { display: block; margin-top: 0.35rem; color: var(--texte-doux); }

@media (min-width: 768px) {
  .conseils { grid-template-columns: 1fr 1fr; }
}

/* Appel à la démonstration, en bas des pages */

.appel { padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: var(--beurre); }
.appel-grille { display: grid; gap: 1.5rem; align-items: center; }
.appel p { max-width: 36rem; margin-top: 0.75rem; color: var(--texte-doux); }
.appel .actions { margin-top: 0; }

@media (min-width: 900px) {
  .appel-grille { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
}

/* Marges */

.deux-colonnes { display: grid; gap: 3rem; align-items: center; }
.deux-colonnes .telephone { justify-self: center; width: min(80vw, 20rem); }

@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 5rem; }
}

/* Prix */

.escalier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; align-items: end; max-width: 46rem; margin-top: 2.5rem; padding: 0; list-style: none; border-bottom: 2px solid var(--texte); }
.marche { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem; padding: 1rem; border-radius: var(--rayon) var(--rayon) 0 0; background: var(--panneau); }
/* Les hauteurs suivent les prix : 199, 169 et 149 €. */
.marche-1 { height: 15rem; background: var(--beurre); }
.marche-2 { height: 12.75rem; }
.marche-3 { height: 11.25rem; }
.marche-annee { font-size: 0.9375rem; line-height: 1.3; color: var(--texte-doux); }
.marche-prix { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.marche-mois { font-size: 0.9375rem; }
.prix-note { max-width: 46rem; margin-top: 1.25rem; font-weight: 500; }
.prix-details { display: grid; gap: 2.5rem; margin-top: 3.5rem; }
.prix-details h3 + .liste { margin-top: 0.75rem; }
.prix-details .liste + h3 { margin-top: 2rem; }
.liste { padding-left: 1.25rem; color: var(--texte-doux); }
.liste li + li { margin-top: 0.6rem; }
.liste li::marker { color: var(--dore); }

@media (min-width: 900px) {
  .prix-details { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
}

/* Comment ça se passe */

.etapes { display: grid; gap: 2rem; margin-top: 3rem; padding: 0; list-style: none; counter-reset: etape; }
.etape { padding-top: 1.25rem; border-top: 2px solid var(--texte); counter-increment: etape; }
.etape::before { content: counter(etape); display: block; margin-bottom: 1rem; font-size: 2.25rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.etape p { margin-top: 0.5rem; color: var(--texte-doux); }

@media (min-width: 900px) {
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
}

/* Qui suis-je */

.lettre { margin-top: 2rem; }
.lettre p { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.65; }
.lettre p + p { margin-top: 1.1em; }
.lettre .signature { margin-top: 1.75rem; font-weight: 600; }
.zone { margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--rayon); background: var(--farine); }
.zone p { margin-top: 0.5rem; color: var(--texte-doux); }

/* Questions */

.questions { max-width: 48rem; margin-top: 2.5rem; border-top: 1px solid var(--bordure-forte); }
.questions details { border-bottom: 1px solid var(--bordure-forte); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: '+'; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.questions details[open] summary::after { content: '−'; }
.questions details p { max-width: 42rem; padding-bottom: 1.25rem; color: var(--texte-doux); }

/* Contact */

.contact { background: var(--beurre); }
.contact .texte-courant p { max-width: 30rem; }
.contact .texte-courant a { color: var(--texte); }
.suite { padding-left: 1.25rem; }
.suite li + li { margin-top: 0.5rem; }
.autre-commerce { padding-top: 1rem; border-top: 1px solid rgb(36 26 16 / 0.2); font-size: 0.9375rem; }
.contact-grille { display: grid; gap: 2.5rem; }
.panneau-formulaire { padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); border-radius: 1rem; background: var(--fond); }

@media (min-width: 960px) {
  .contact-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 4rem; align-items: start; }
}

.champs, .sous-champs { display: grid; gap: 1.25rem; }
.champ { display: grid; gap: 0.4rem; align-content: start; }
.champ label, .legende-champ { padding: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.legende-champ { margin-bottom: 0.5rem; }
.facultatif { font-weight: 400; color: var(--discret); }

@media (min-width: 640px) {
  .champs, .sous-champs { grid-template-columns: 1fr 1fr; }
  .champ-large { grid-column: 1 / -1; }
}

input, select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--bord-champ);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 1rem;
}
textarea { min-height: 7.5rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--texte); outline: 3px solid var(--texte); outline-offset: 1px; }

.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.choix label { display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.6rem 0.9rem; border: 1px solid var(--bord-champ); border-radius: var(--rayon); background: var(--fond); font-weight: 500; line-height: 1.3; cursor: pointer; }
.choix input { flex: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; accent-color: var(--texte); }
.choix label:has(input:checked) { border-color: var(--texte); background: var(--beurre-doux); box-shadow: inset 0 0 0 1px var(--texte); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--texte); outline-offset: 2px; }
.choix input:focus-visible { outline: none; }

.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.verification:not(:empty) { margin-top: 1.25rem; }
.etat { margin-top: 1.25rem; padding: 0.75rem 1rem; border-radius: var(--rayon); background: var(--rouge-fond); color: var(--rouge); font-weight: 500; }
.etat:empty { display: none; }
.bouton-envoyer { width: 100%; margin-top: 1.5rem; }
.mention { margin-top: 1rem; font-size: 0.875rem; color: var(--texte-doux); }
.merci { padding: 0.5rem 0; }
.merci:focus { outline: none; }
.merci p { margin-top: 0.75rem; color: var(--texte-doux); }

@media (min-width: 640px) {
  .bouton-envoyer { width: auto; }
}

/* Pied de page */

.pied { padding-block: 3.5rem 2rem; background: var(--texte); color: var(--farine); }
.pied a { color: #fff; }
.pied a:hover { color: var(--beurre); }
.pied .logo-clair { color: #fff; }
.pied .logo-clair .m { color: var(--beurre); }
.pied-grille { display: grid; gap: 2rem; }
.pied-texte { margin-top: 1rem; font-size: 0.9375rem; color: var(--bordure); }
.pied-contact { margin-top: 1rem; }
.pied-titre { margin-bottom: 0.75rem; font-weight: 600; }
.pied ul { display: grid; gap: 0.5rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.pied-bas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--texte-doux); font-size: 0.875rem; color: var(--contour); }

@media (min-width: 600px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .pied-grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* Pages de texte : mentions légales, données personnelles, conditions générales */

.page-texte { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.page-texte h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.chapo { max-width: 46rem; margin-top: 1rem; font-size: 1.125rem; color: var(--texte-doux); }
.document { max-width: 46rem; overflow-wrap: anywhere; }
.document h2 { margin-top: 2.75rem; font-size: 1.5rem; }
.document h3 { margin-top: 1.75rem; font-size: 1.125rem; }
.document p, .document ul, .document ol, .document table { margin-top: 0.85rem; }
.document li + li { margin-top: 0.35rem; }
.document table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9375rem; }
.document th, .document td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.document th { background: var(--farine); }
.sommaire { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--rayon); background: var(--farine); }
.sommaire ul { margin-top: 0.5rem; padding: 0; list-style: none; columns: 2 16rem; column-gap: 2rem; font-size: 0.9375rem; }
.sommaire li { break-inside: avoid; margin-bottom: 0.3rem; }
.page-texte .actions { margin-top: 1.5rem; }
.encadre { margin-top: 3rem; padding: 1.5rem; border-radius: var(--rayon); background: var(--farine); }
.document .encadre h2 { margin-top: 0; }