/* matys.be — la refonte (brief du 19/10/2026, textes réécrits le 21/10) DANS LE THÈME DU SITE DE BASE (Lionel, 21/10 :
   « ok pour la comm, mais respecte le thème du site de base ») : le fond menthe très clair, l'encre vert-bleu, Space Grotesk
   très gras avec les mots clés en dégradé turquoise, les étiquettes arrondies à point, les boutons en dégradé, la barre de
   menu flottante, la bande foncée arrondie, les cartes blanches, le pied arrondi. Les valeurs viennent de matys.css (master).
   Polices hébergées ici ; rien ne bouge si le visiteur demande moins de mouvement ; tout reste lisible sans JavaScript. */

@font-face { font-family: "Space Grotesk"; src: url("polices/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("polices/space-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("polices/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("polices/caveat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ivoire: #f4faf9;           /* --bg du site de base : le fond de page */
  --blanc: #ffffff;            /* --surface */
  --surface-2: #eef8f5;
  --encre: #0c2b29;            /* --ink */
  --texte: #33514f;            /* --txt */
  --discret: #5f7d7a;          /* --muted */
  --accent: #0da59b;           /* --cyan */
  --accent-lisible: #0a7d8e;   /* --blue : liens et petits textes (4,6) */
  --ciel: #08a1c3;             /* --sky */
  --vif-1: #12d9c7;
  --vif-2: #06b8cb;
  --degrade: linear-gradient(120deg, #12d9c7, #08bdca 62%, #06b8cb);       /* --grad (décors) */
  --degrade-bouton: linear-gradient(120deg, #0da59b, #08a1c3);            /* --grad-btn */
  --degrade-bouton-survol: linear-gradient(120deg, #0c9b91, #0796b6);
  --degrade-texte: linear-gradient(100deg, #0da59b, #0aa3ad 52%, #08a1c3); /* --grad-text : les mots clés des titres */
  --bouton: #0a3648;           /* --teal-deep : la bande foncée, les éléments sombres */
  --menthe: #eaf4f2;           /* --bg-2 */
  --sable: #eaf4f2;            /* le pied, comme le site de base */
  --ligne: rgba(9, 52, 49, .11);
  --ligne-2: rgba(9, 52, 49, .18);
  --rayon: 18px;
  --rayon-petit: 12px;
  --rayon-grand: 26px;
  --cadre: 1200px;
  --gouttiere: 24px;
  --titre: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --corps: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --main: "Caveat", "Segoe Print", cursive;
  --ombre: 0 22px 55px -26px rgba(10, 54, 50, .28);
  --ombre-douce: 0 14px 34px -22px rgba(10, 54, 50, .28);
  --lueur: 0 10px 26px -8px rgba(16, 208, 192, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  --survol: 250ms cubic-bezier(.2, .7, .2, 1);
  --entree: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivoire); color: var(--texte); font-family: var(--corps); font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-lisible); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; color: var(--encre); font-family: var(--titre); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
figure { margin: 0; }
button { font: inherit; }
.cadre { width: 100%; max-width: calc(var(--cadre) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.evitement { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--bouton); color: #fff; }
.evitement:focus { top: 12px; color: #fff; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Titres ─────────────────────────────────────────────────────────────── */
.titre-1 { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1.03; letter-spacing: -.03em; }
.titre-2 { font-size: clamp(1.875rem, 1.3rem + 2.1vw, 3rem); line-height: 1.08; letter-spacing: -.025em; }
.titre-3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; }
.titre-1 .ligne, .titre-2 .ligne { display: block; }
/* Les mots clés en dégradé turquoise, comme les <em> du site de base. */
.titre-1 .ligne--accent, .titre-2 .ligne--accent, .accent-texte { background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.surtitre { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 7px 14px; border: 1px solid rgba(16, 208, 192, .28); border-radius: 100px; background: rgba(16, 208, 192, .08); font-family: var(--corps); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-lisible); }
.surtitre::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(16, 208, 192, .18); }
.annotation { font-family: var(--main); font-weight: 600; font-size: 1.5rem; line-height: 32px; color: var(--accent-lisible); }
.intro { max-width: 46ch; font-size: 1.1875rem; line-height: 1.6; color: var(--texte); }
.mention { display: inline-flex; gap: 8px; align-items: baseline; margin: 16px 0 0; font-size: .875rem; color: var(--discret); }
.mention::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--degrade); transform: translateY(-1px); }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 14px 26px; border: 0; border-radius: 100px; font-family: var(--corps); font-weight: 600; font-size: .98rem; letter-spacing: .01em; line-height: 1.2; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform var(--survol), box-shadow var(--survol), border-color var(--survol), background-color var(--survol); }
.bouton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: translateX(-130%); transition: transform .6s var(--entree); }
.bouton:hover::after { transform: translateX(130%); }
.bouton .ico { width: 18px; height: 18px; transition: transform var(--survol); }
.bouton:hover .ico { transform: translateX(3px); }
.bouton--principal { background: var(--degrade-bouton); color: #fff; font-weight: 700; box-shadow: var(--lueur); }
.bouton--principal:hover { background: var(--degrade-bouton-survol); color: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(16, 208, 192, .72), inset 0 1px 0 rgba(255, 255, 255, .55); }
.bouton--second { background: var(--blanc); color: var(--encre); border: 1.5px solid var(--ligne-2); box-shadow: 0 3px 12px -6px rgba(9, 52, 49, .22); }
.bouton--second:hover { border-color: var(--vif-1); color: var(--encre); background: var(--surface-2); transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(16, 208, 192, .4); }
.bouton--petit { min-height: 42px; padding: 10px 18px; font-size: .9375rem; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent-lisible); text-decoration: none; }
.lien-fleche .ico { width: 18px; height: 18px; transition: transform var(--survol); }
.lien-fleche:hover { color: var(--encre); }
.lien-fleche:hover .ico { transform: translateX(3px); }

/* ── En-tête et menus : la barre flottante arrondie du site de base ───────── */
.tete { position: sticky; top: 14px; z-index: 50; padding: 0 16px; }
.tete__ligne { display: flex; align-items: center; gap: 18px; max-width: var(--cadre); height: 66px; margin: 0 auto; padding: 0 12px 0 20px; background: rgba(255, 255, 255, .86); border: 1px solid var(--ligne); border-radius: 100px; box-shadow: 0 14px 38px -20px rgba(9, 52, 49, .2); transition: box-shadow var(--survol); }   /* hauteur fixe : l'arrivée des polices ne pousse pas la page */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tete__ligne { background: rgba(255, 255, 255, .985); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
.tete.est-decolle .tete__ligne { box-shadow: 0 18px 44px -20px rgba(9, 52, 49, .32); }
.logo { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; font-family: var(--titre); font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; color: #0a3648; text-decoration: none; }
.logo:hover { color: #0a3648; }
.logo img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 16px -4px rgba(15, 158, 130, .4); }
.menu__liste { display: flex; align-items: center; gap: 4px; }
.menu__item { position: relative; }
.menu__lien { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 100px; color: var(--texte); font-size: .92rem; font-weight: 500; text-decoration: none; transition: background-color var(--survol), color var(--survol); }
.menu__lien:hover, .menu__item:focus-within > .menu__lien { background: rgba(9, 52, 49, .05); color: var(--encre); }
.menu__item.est-courant > .menu__lien { color: var(--accent); }
.ico--chevron { width: 15px; height: 15px; transition: transform var(--survol); }
.menu__item--sous:hover .ico--chevron, .menu__item--sous:focus-within .ico--chevron { transform: rotate(180deg); }
.sous { position: absolute; top: 100%; left: -12px; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--survol), transform var(--survol), visibility var(--survol); }
.menu__item--sous:hover .sous, .menu__item--sous:focus-within .sous { opacity: 1; visibility: visible; transform: none; }
.sans-survol .menu__item--sous:hover:not(:focus-within) .sous { opacity: 0; visibility: hidden; transform: translateY(6px); }
.sous__boite { display: grid; gap: 4px; width: 340px; padding: 10px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
.sous__lien { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: var(--rayon-petit); color: var(--encre); text-decoration: none; transition: background-color var(--survol); }
.sous__lien:hover, .sous__lien[aria-current="page"] { background: var(--surface-2); color: var(--encre); }
.sous__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(16, 208, 192, .1); color: var(--accent-lisible); }
.sous__ico .ico { width: 21px; height: 21px; }
.sous__lien:hover .sous__ico { background: var(--degrade-bouton); color: #fff; }
.sous__titre { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.sous__aide { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--discret); }
.mobile { display: none; }

@media (max-width: 1080px) {
  .menu, .tete__contact { display: none; }
  .mobile { display: block; }
  .tete { top: 10px; padding: 0 10px; }
  .tete__ligne { height: 60px; gap: 12px; padding: 0 8px 0 14px; }
  .logo img { width: 34px; height: 34px; }
  .mobile__bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--menthe); color: var(--encre); font-weight: 600; cursor: pointer; list-style: none; }
  .mobile__bouton::-webkit-details-marker { display: none; }
  .mobile__bouton span { position: relative; width: 16px; height: 10px; border-block: 2px solid currentColor; }
  .mobile__bouton span::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  .mobile__bouton { background: rgba(9, 52, 49, .05); }
  .mobile[open] .mobile__bouton { background: var(--degrade-bouton); color: #fff; }
  .mobile__panneau { position: absolute; left: 10px; right: 10px; top: calc(100% + 8px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
  .mobile__panneau > ul > li { border-bottom: 1px solid var(--ligne); }
  .mobile__panneau > ul > li:last-child { border: 0; }
  .mobile__lien { display: block; padding: 16px 0; color: var(--encre); font-family: var(--titre); font-weight: 600; font-size: 1.1875rem; text-decoration: none; }
  .mobile__titre { margin: 16px 0 4px; font-family: var(--titre); font-weight: 600; font-size: 1.1875rem; color: var(--encre); }
  .mobile__groupe { padding-bottom: 10px; }
  .mobile__groupe .sous__lien { padding: 10px 0; }
  .mobile__contact { width: 100%; margin-top: 18px; }
}

/* ── Les sections ───────────────────────────────────────────────────────── */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--serre { padding-top: clamp(40px, 5vw, 72px); }
.section__tete { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.section__tete p:last-child { margin-bottom: 0; }
.section__tete .intro { margin-top: 18px; }
.deux-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: start; }
@media (max-width: 900px) { .deux-col { grid-template-columns: minmax(0, 1fr); } }

/* ── L'ouverture de l'accueil : le texte à gauche, les réalisations à droite ─ */
.ouverture { position: relative; padding: clamp(36px, 5vw, 72px) 0 clamp(64px, 7vw, 104px); overflow: hidden; }
.ouverture__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
/* Calé en haut (pas centré) : l'arrivée des polices ne déplace rien (mesuré : 18 px de décalage quand le texte était centré). */
.ouverture__texte { padding-top: clamp(0px, 2vw, 32px); }
.ouverture .annotation { display: inline-block; margin-bottom: 14px; transform: rotate(-2deg); }
.ouverture__sous { margin: 22px 0 0; font-size: 1.25rem; color: var(--texte); }
.ouverture__liaison { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 28px; }   /* toujours deux lignes : l'arrivée de la police ne change rien */
.ouverture__liaison .annotation { margin: 0; transform: none; font-size: 1.375rem; color: var(--encre); }
@media (max-width: 1000px) {
  .ouverture__grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* Les trois portes d'entrée (accueil) : les trois offres dès le premier écran, une phrase claire chacune. */
.portes { display: grid; gap: 10px; margin-top: 32px; }
.porte { display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 16px 18px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); color: var(--encre); text-decoration: none; box-shadow: 0 10px 24px -22px rgba(9, 46, 60, .5); transition: border-color var(--survol), transform var(--survol), box-shadow var(--survol); }
.porte:hover { border-color: var(--vif-1); color: var(--encre); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(16, 208, 192, .4); }
.porte__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(16, 208, 192, .1); color: var(--accent-lisible); transition: background-color var(--survol), color var(--survol); }
.porte__ico .ico { width: 24px; height: 24px; }
.porte:hover .porte__ico { background: var(--degrade-bouton); color: #fff; }
.porte__titre { display: block; font-family: var(--titre); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
.porte__ligne { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.45; color: var(--texte); }
.porte > .ico { width: 20px; height: 20px; color: var(--accent-lisible); transition: transform var(--survol); }
.porte:hover > .ico { transform: translateX(3px); }
.vitrine__titre { position: relative; z-index: 1; }
@media (max-width: 560px) { .porte { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 14px; padding: 14px 16px; } .porte__ico { width: 44px; height: 44px; } }

/* Le slider de réalisations : un écran de navigateur à hauteur FIXE (le site défile à l'intérieur, la page ne bouge pas),
   posé sur une forme souple au dégradé du logo. */
.vitrine { position: relative; }
.vitrine__forme { position: absolute; z-index: 0; width: 80%; aspect-ratio: 1; right: -18%; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 217, 199, .28), rgba(6, 184, 203, .1) 60%, transparent); }
.ecran { position: relative; z-index: 1; overflow: hidden; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.ecran__barre { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--ligne); background: #FBFAF6; }
.ecran__barre i { width: 9px; height: 9px; border-radius: 50%; background: #E2E2DC; }
.ecran__barre span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--ligne); font-size: .75rem; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecran__vue { aspect-ratio: 16 / 10; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: #F3F3EF; }
.ecran__vue::-webkit-scrollbar { display: none; }
.ecran__vue img { width: 100%; }
.slider { position: relative; }
.slide { display: none; }
.slide.est-active { display: block; animation: apparaitre 350ms var(--entree) both; }
.no-js .slide { display: block; }
.slider__bas { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-top: 22px; }
.slider__legende { min-width: 0; }
.slider__type { margin: 0 0 4px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); }
.slider__nom { font-family: var(--titre); font-size: 1.375rem; font-weight: 600; color: var(--encre); line-height: 1.2; }
.slider__ligne { margin: 4px 0 0; color: var(--texte); }
.slider__commandes { display: flex; align-items: center; gap: 8px; }
.rond { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--ligne); border-radius: 50%; background: var(--blanc); color: var(--encre); cursor: pointer; transition: background-color var(--survol), color var(--survol), border-color var(--survol); }
.rond .ico { width: 20px; height: 20px; }
.rond:hover { background: var(--degrade-bouton); border-color: transparent; color: #fff; }
.slider__compte { min-width: 44px; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--discret); }
.slider__points { display: flex; gap: 6px; margin-top: 14px; }
.slider__points i { width: 22px; height: 4px; border-radius: 2px; background: var(--ligne); transition: background-color var(--survol), width var(--survol); }
.slider__points i.est-actif { width: 34px; background: var(--degrade); }

/* ── Les trois offres (lignes, pas de cartes identiques) ─────────────────── */
.offres { border-top: 1px solid var(--ligne); }
.offre { display: grid; grid-template-columns: 110px minmax(0, 4fr) minmax(0, 5fr) auto; gap: 18px 40px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--ligne); }
.offre__num { font-family: var(--titre); font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre__titre { display: flex; align-items: center; gap: 14px; }
.offre__ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--menthe); color: var(--accent-lisible); }
.offre__ico .ico { width: 23px; height: 23px; }
.offre p { margin: 0; }
@media (max-width: 1000px) {
  .offre { grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center; padding: 28px 0; }
  .offre__num { font-size: 2.25rem; }
  .offre > p, .offre .bouton { grid-column: 1 / -1; }
  .offre .bouton { justify-self: start; }
}

/* « Vous avez déjà un site ? » : deux entrées courtes */
.deja { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 56px; align-items: center; }
.deja__liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.deja__lien { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--rayon); background: var(--menthe); color: var(--encre); font-weight: 600; text-decoration: none; transition: background-color var(--survol), transform var(--survol); }
.deja__lien .sous__ico { background: var(--blanc); }
.deja__lien > .ico { margin-left: auto; width: 20px; height: 20px; color: var(--accent-lisible); transition: transform var(--survol); }
.deja__lien:hover { background: #DCE9E2; color: var(--encre); transform: translateY(-2px); }
.deja__lien:hover > .ico { transform: translateX(3px); }
@media (max-width: 900px) { .deja { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .deja__liens { grid-template-columns: minmax(0, 1fr); } }

/* ── Illustration d'application (fictive, annoncée comme telle) ─────────── */
.demo-app { position: relative; }
.demo-app .mention { position: relative; z-index: 1; }
.demo-app__fenetre { position: relative; z-index: 1; padding: 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.demo-app__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-family: var(--titre); font-weight: 600; color: var(--encre); }
.demo-app__entete span { display: flex; gap: 6px; }
.demo-app__entete i { width: 9px; height: 9px; border-radius: 50%; background: #E2E2DC; }
.demo-app__ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-radius: var(--rayon-petit); background: var(--ivoire); }
.demo-app__ligne + .demo-app__ligne { margin-top: 10px; }
.demo-app__ligne .sous__ico { width: 44px; height: 44px; }
.demo-app__nom { display: block; font-weight: 600; color: var(--encre); }
.demo-app__etat { display: block; font-size: .9375rem; color: var(--texte); }
.demo-app__ligne--neuve { background: var(--menthe); }
.demo-app__ligne--neuve .demo-app__nom::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--degrade); transform: translateY(-2px); }
.forme-douce { position: absolute; z-index: 0; border-radius: 52% 48% 41% 59% / 46% 55% 45% 54%; background: var(--menthe); }
.forme-douce--app { inset: -8% 6% -10% -6%; }
.espace-haut { margin-top: 12px; }
.espace-haut-grand { margin-top: 36px; }
.espace-bas { margin-bottom: 22px; }
.points--haut { margin-top: 36px; }
.points--colonne { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }

/* ── Les démonstrations pas à pas (automatisation, agent devis) ──────────── */
.demo { position: relative; padding: clamp(22px, 3vw, 32px); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre-douce); }
.demo__etapes { display: grid; gap: 12px; counter-reset: etape; }
.demo__etapes--ligne { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.demo__etape { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; border-radius: var(--rayon-petit); background: var(--surface-2); border: 1px solid transparent; transition: opacity 300ms var(--entree), transform 300ms var(--entree), background-color 300ms, border-color 300ms; }
.demo__etape .sous__ico { width: 44px; height: 44px; }
.demo__etape-titre { display: block; font-weight: 600; color: var(--encre); line-height: 1.35; }
.demo__etape-texte { display: block; margin-top: 2px; font-size: .9375rem; color: var(--texte); }
.demo__etape-texte ul { margin-top: 6px; }
.demo__etape-texte li { position: relative; padding-left: 16px; }
.demo__etape-texte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.demo__etape.est-courante { background: rgba(16, 208, 192, .1); border-color: rgba(16, 208, 192, .35); }
.demo.est-animee .demo__etape:not(.est-vue) { opacity: .6; }
.demo__fin { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--rayon-petit); background: var(--bouton); color: #fff; font-weight: 500; transition: opacity 300ms; }
.demo.est-animee:not(.est-finie) .demo__fin { opacity: 0; }
.demo__commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.demo__commandes .bouton { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.demo__commandes .bouton:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.citation { margin: 0; font-family: var(--titre); font-size: 1.0625rem; font-weight: 500; color: var(--encre); }
@media (max-width: 760px) { .demo__etapes--ligne { grid-template-columns: minmax(0, 1fr); } }

/* ── Réalisations : vignettes nettes, peu de cadres ──────────────────────── */
.projets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; }
.projet { position: relative; overflow: hidden; padding-bottom: 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-grand); box-shadow: var(--ombre-douce); transition: transform var(--survol), border-color var(--survol), box-shadow var(--survol); }
.projet:hover { transform: translateY(-4px); border-color: var(--vif-1); box-shadow: 0 22px 44px -22px rgba(16, 208, 192, .45); }
.projet > :not(.projet__image) { margin-inline: 22px; }
.projet__image { overflow: hidden; background: #e6efed; border-bottom: 1px solid var(--ligne); }
.projet__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 500ms var(--entree); }
.projet:hover .projet__image img { transform: scale(1.03); }
.projet__type { display: inline-block; margin-top: 18px; margin-bottom: 10px; padding: 4px 11px; border-radius: 100px; background: rgba(16, 208, 192, .1); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-lisible); }
.projet__nom { font-size: 1.3125rem; line-height: 1.25; }
.projet__nom a { color: var(--encre); text-decoration: none; }
.projet__nom a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-grand); }
.projet__nom a:focus-visible { outline: none; }
.projet:focus-within { outline: 2px solid var(--accent-lisible); outline-offset: 4px; }
.projet__texte { margin: 8px 0 0; font-size: .9875rem; }
.projet[hidden] { display: none; }
@media (max-width: 1000px) { .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .projets { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
@media (max-width: 600px) { .filtres { gap: 8px; } .filtre { min-height: 44px; padding: 8px 16px; font-size: .9375rem; } }
.filtre { min-height: 44px; padding: 10px 20px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc); color: var(--encre); font-weight: 500; cursor: pointer; transition: background-color var(--survol), color var(--survol), border-color var(--survol); }
.filtre:hover { border-color: var(--accent); }
.filtre[aria-pressed="true"] { background: var(--degrade-bouton); border-color: transparent; color: #fff; }

/* ── La méthode ─────────────────────────────────────────────────────────── */
.methode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: pas; }
.pas { position: relative; padding: 26px 24px 28px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); }
.pas__num { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 12px; background: rgba(16, 208, 192, .1); font-family: var(--titre); font-weight: 700; font-size: .95rem; color: var(--accent-lisible); }
.pas h3 { margin-bottom: 10px; }
.pas p { margin: 0; }
@media (max-width: 900px) { .methode { grid-template-columns: minmax(0, 1fr); } }

/* ── Ouverture des autres pages ──────────────────────────────────────────── */
.tete-page { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.tete-page__forme { position: absolute; right: -12%; top: -45%; width: min(680px, 70vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 217, 199, .22), rgba(6, 184, 203, .08) 60%, transparent); }
.tete-page .cadre { position: relative; }
.tete-page .intro { margin-top: 22px; max-width: 58ch; }
.fil { margin: 0 0 18px; font-size: .875rem; }
.fil a { color: var(--discret); text-decoration: underline; text-decoration-color: var(--ligne-2); }   /* audit du 25/10 : un lien se repère sans la couleur */
.fil a:hover { color: var(--encre); text-decoration: underline; }

/* Navigation interne à icônes (page « Votre site web ») */
.raccourcis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.raccourci { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--rayon-petit); background: var(--blanc); border: 1px solid var(--ligne); color: var(--encre); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: border-color var(--survol), transform var(--survol); }
.raccourci:hover { border-color: var(--accent); color: var(--encre); transform: translateY(-2px); }
@media (max-width: 900px) { .raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .raccourcis { grid-template-columns: minmax(0, 1fr); } }

/* Réalisation mise en avant */
.vedette { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
[aria-labelledby^="titre-ex"] .vedette { align-items: start; }
.vedette__texte .titre-2 { margin-bottom: 18px; }
@media (max-width: 900px) { .vedette { grid-template-columns: minmax(0, 1fr); } .vedette__visuel { order: -1; } }

/* Questions-réponses des pages de service */
.qr { border-top: 1px solid var(--ligne); counter-reset: q; }
.qr__item { display: block; border-bottom: 1px solid var(--ligne); counter-increment: q; }
.qr__item h3 { display: flex; gap: 14px; align-items: flex-start; font-size: 1.3125rem; line-height: 1.3; }
.qr__item h3 .ico { display: none; }
.qr__item h3 > span::before { content: "— Q " counter(q, decimal-leading-zero); display: block; margin-bottom: 8px; font-family: var(--corps); font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--accent-lisible); }
.qr__item p:last-child { margin-bottom: 0; }
.qr__item .lien-fleche { margin-top: 4px; }
@media (max-width: 900px) { .qr__item { grid-template-columns: minmax(0, 1fr); padding: 26px 0; } }

/* Encadré de périmètre (Visibilité & suivi) */
.perimetre { display: flex; gap: 16px; align-items: flex-start; margin-top: 36px; padding: 22px 26px; border-radius: var(--rayon); background: var(--menthe); color: var(--encre); font-weight: 500; }
.perimetre .ico { width: 24px; height: 24px; margin-top: 1px; color: var(--accent-lisible); }
.perimetre p { margin: 0; }

/* Points clés et listes à puces */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.points li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--rayon-petit); background: var(--blanc); border: 1px solid var(--ligne); color: var(--encre); font-weight: 500; }
.points li .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
@media (max-width: 700px) { .points { grid-template-columns: minmax(0, 1fr); } }
.etapes-methode { display: grid; gap: 10px; counter-reset: em; }
.etapes-methode li { counter-increment: em; display: flex; gap: 14px; align-items: baseline; color: var(--encre); font-weight: 500; }
.etapes-methode li::before { content: counter(em); display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--menthe); color: var(--accent-lisible); font-family: var(--titre); font-weight: 600; font-size: .9375rem; }

/* ── Fiche d'une réalisation ─────────────────────────────────────────────── */
.fiche__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 64px; align-items: start; }
.fiche__aside { position: sticky; top: 110px; padding: 26px; border-radius: var(--rayon); background: var(--menthe); }
.fiche__aside h2 { margin-bottom: 14px; font-size: 1.0625rem; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes li { padding: 7px 14px; border-radius: 999px; background: var(--blanc); color: var(--encre); font-size: .9375rem; font-weight: 500; }
.fiche__aside .bouton { width: 100%; margin-top: 22px; }
.statut { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--menthe); color: var(--encre); font-size: .875rem; font-weight: 600; }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--discret); }
@media (max-width: 900px) { .fiche__grille { grid-template-columns: minmax(0, 1fr); } .fiche__aside { position: static; } }
.ecran--grand .ecran__vue { aspect-ratio: 16 / 9.5; }

/* ── À propos ───────────────────────────────────────────────────────────── */
.portrait { position: relative; max-width: 420px; }
.portrait img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 42% 58% 54% 46% / 48% 44% 56% 52%; box-shadow: var(--ombre); }
.portrait::before { content: ""; position: absolute; inset: 8% -6% -6% 8%; border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%; background: var(--degrade); opacity: .25; }
.parcours { position: relative; display: grid; gap: 22px; padding-left: 30px; }
.parcours::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--degrade); opacity: .5; }
.parcours li { position: relative; color: var(--encre); font-weight: 500; }
.parcours li::before { content: ""; position: absolute; left: -30px; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--ivoire); border: 3px solid var(--accent); }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.coordonnees { padding: 30px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre-douce); }
.coordonnees p { margin: 0 0 6px; color: var(--encre); }
.coordonnees .bouton { margin-top: 20px; }
.avertissement { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 20px; border-radius: var(--rayon-petit); background: #FFF6E5; color: #6B4E12; font-size: .9375rem; }
.avertissement .ico { width: 20px; height: 20px; margin-top: 2px; }

/* ── Bloc de contact commun ──────────────────────────────────────────────── */
.appel { padding: 0 0 clamp(72px, 9vw, 120px); }
.appel__boite { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px); border-radius: clamp(26px, 3.2vw, 40px); background: var(--menthe); border: 1px solid var(--ligne); }
.cadre.appel__boite { max-width: var(--cadre); width: calc(100% - 2 * var(--gouttiere)); }
.appel__forme { position: absolute; right: -140px; bottom: -200px; width: 520px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 217, 199, .3), transparent); }
.appel .surtitre, .appel .titre-2, .appel__texte, .appel .boutons, .appel__signature { position: relative; max-width: 640px; }
.appel__texte { margin-top: 18px; font-size: 1.125rem; }
.appel__signature { display: flex; flex-direction: column; margin: 32px 0 0; font-size: .9375rem; color: var(--texte); }
.appel__signature strong { color: var(--encre); font-weight: 600; }
.appel .bouton--second { background: var(--blanc); }
.appel .bouton--second:hover { background: var(--ivoire); }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.pied { padding: 64px 0 28px; background: var(--sable); border-top: 1px solid var(--ligne); border-radius: 36px 36px 0 0; font-size: .9375rem; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.pied__marque p { margin: 16px 0 0; color: var(--texte); }
.pied__titre { margin: 0 0 12px; font-family: var(--titre); font-weight: 600; color: var(--encre); }
.pied__col li + li { margin-top: 8px; }
.pied__col a { color: var(--texte); text-decoration: none; }
.pied__col a:hover { color: var(--encre); text-decoration: underline; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ligne); font-size: .875rem; color: var(--discret); }
.pied__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied__legal a, .pied__cookies { color: var(--discret); text-decoration: none; }
.pied__cookies { padding: 0; border: 0; background: none; cursor: pointer; font-size: inherit; }
.pied__legal a:hover, .pied__cookies:hover { color: var(--encre); text-decoration: underline; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__marque { grid-column: 1 / -1; } }

/* ── Pages légales (contenu du site actuel, inchangé) ───────────────────── */
.legal-container { max-width: calc(820px + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.legal-eyebrow { margin: 0 0 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lisible); }
.legal-title { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem); line-height: 1.06; letter-spacing: -.025em; }
.legal-lead { margin-top: 18px; font-size: 1.1875rem; }
.legal-update { font-size: .875rem; color: var(--discret); }
.legal-content { margin-top: 40px; }
.legal-content h2 { margin: 40px 0 12px; font-size: 1.375rem; }
.legal-content ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.legal-content li { margin-bottom: .4em; }
.legal-table { margin: 18px 0 24px; border: 1px solid var(--ligne); border-radius: var(--rayon-petit); overflow: hidden; background: var(--blanc); font-size: .9375rem; }
.legal-table__row { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1.4fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ligne); }
.legal-table__row--head { border-top: 0; background: var(--menthe); color: var(--encre); font-weight: 600; }
@media (max-width: 700px) { .legal-table__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.legal-prefs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 20px 24px; border-radius: var(--rayon); background: var(--menthe); color: var(--encre); }
.legal-prefs__actions { display: flex; gap: 10px; }
.legal-prefs .btn { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; font-weight: 600; cursor: pointer; }
.legal-prefs .btn-primary { background: var(--degrade-bouton); color: #fff; box-shadow: var(--lueur); }
.legal-prefs .btn-ghost { background: var(--blanc); color: var(--encre); }
.section-legal { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); }

/* ── Bandeau cookies (mêmes classes que le site actuel, cookies.js inchangé) ─ */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; max-width: 980px; margin: 0 auto; padding: 18px 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.cookie-banner__text strong { color: var(--encre); font-weight: 600; }
.cookie-banner__text p { margin: 4px 0 0; font-size: .875rem; color: var(--texte); }
.cookie-banner__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.cookie-banner__btn { min-height: 42px; padding: 9px 18px; border: 1px solid var(--ligne); border-radius: 999px; background: transparent; color: var(--encre); font-weight: 600; font-size: .875rem; text-decoration: none; cursor: pointer; }
.cookie-banner__btn--link { border-color: transparent; color: var(--discret); }
.cookie-banner__btn--primary { background: var(--degrade-bouton); border-color: transparent; color: #fff; box-shadow: var(--lueur); }
@media (max-width: 760px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner__btn { text-align: center; }
  .cookie-banner__btn--link { grid-column: 1 / -1; grid-row: 2; min-height: 36px; }
}

/* ── Petits écrans ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --gouttiere: 20px; }
  body { font-size: 1rem; }
  .intro, .ouverture__sous { font-size: 1.0625rem; }
  .boutons { flex-direction: column; align-items: stretch; }
  .boutons .bouton { width: 100%; }
  .slider__bas { align-items: flex-start; }
}

/* ── Mouvement : entrées de 350 ms, rien ne boucle ; coupé si le visiteur demande moins de mouvement ; sans JavaScript,
   rien n'est caché (la classe .js est posée par site.js). ─────────────────────────────────────────────────────────── */
@keyframes apparaitre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js [data-apparition] { opacity: 0; transform: translateY(18px); transition: opacity 350ms var(--entree), transform 350ms var(--entree); }
.js [data-apparition].est-visible { opacity: 1; transform: none; }
.js [data-apparition].est-arrive { transition: transform var(--survol), box-shadow var(--survol), background-color var(--survol), border-color var(--survol); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-apparition] { opacity: 1; transform: none; }
}

/* Fiche d'une réalisation : « Le besoin » sous le titre, « Ce que ça fait » dans l'encadré. */
.fiche__besoin-titre { margin-top: 28px; }
.tete-page .fiche__besoin-titre + .intro { margin-top: 0; }
.fiche__sous-titre { margin: 22px 0 12px; font-size: 1.0625rem; }

/* La bande foncée arrondie du site de base (la méthode de l'accueil). */
.bande { width: calc(100% - clamp(20px, 4vw, 44px)); max-width: 1360px; margin: clamp(6px, 1.4vw, 20px) auto clamp(56px, 7vw, 96px); padding: clamp(52px, 5.5vw, 74px) 0; background: linear-gradient(163deg, #0a3648, #06212e); border-radius: clamp(26px, 3.2vw, 42px); }
.bande .titre-2 { color: #fff; }
.bande .titre-2 .ligne--accent { background: linear-gradient(100deg, #25ecd8, #12d9c7 50%, #0bb9c5); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Retours des visiteurs du 25/10 ─────────────────────────────────────── */
.mot { white-space: nowrap; }
[id] { scroll-margin-top: 104px; }
.copier { margin-left: 6px; padding: 4px 12px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc); color: var(--texte); font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; transition: border-color var(--survol), color var(--survol); }
.copier:hover { border-color: var(--accent); color: var(--encre); }
.copier.est-copie { border-color: var(--accent); color: var(--accent-lisible); }
.boutons--contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 600px) { .section { padding: 56px 0; } .section--serre { padding-top: 32px; } }
.boutons--contact .bouton { margin-top: 0; }
@media (max-width: 900px) { .deux-col > .coordonnees { order: -1; } }   /* au téléphone, le numéro et l'e-mail d'abord (visiteurs du 25/10) */
@media (max-width: 600px) { .ecran--tel .ecran__vue { aspect-ratio: 1 / 1; } .ecran__vue picture { display: block; } }   /* capture téléphone : une fenêtre plus haute */
.coordonnees__societe { font-size: .9375rem; color: var(--texte) !important; }
.coordonnees__note, .fiche__public { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--ligne); font-size: .9375rem; color: var(--encre) !important; }
.fiche__public a { color: var(--accent-lisible); font-weight: 600; }
.boutons--tete { margin-top: 28px; }

/* ── Le téléphone du premier écran des offres (25/10 : « bien visuel et moderne ») ── */
.tete-page__grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.telephone { margin: 0; justify-self: end; }
.telephone__cadre { position: relative; width: 272px; aspect-ratio: 9 / 18.6; padding: 10px; border-radius: 46px; background: #0c2b29; box-shadow: 0 48px 90px -34px rgba(9, 52, 49, .55), 0 0 0 1px rgba(9, 52, 49, .2); }
.telephone__cadre::before { content: ""; position: absolute; z-index: 2; top: 19px; left: 50%; width: 86px; height: 24px; border-radius: 14px; background: #0c2b29; transform: translateX(-50%); }
.telephone__vue { height: 100%; aspect-ratio: auto; border-radius: 36px; background: var(--blanc); }
.telephone figcaption { margin-top: 16px; text-align: center; font-size: .8125rem; color: var(--discret); }
.telephone figcaption a { color: var(--encre); font-weight: 600; text-decoration: none; }
.telephone figcaption a:hover { color: var(--accent-lisible); }
@media (max-width: 1080px) { .tete-page__grille { grid-template-columns: minmax(0, 1fr); } .telephone { display: none; } }
.demo__etape { scroll-margin: 110px 0 24px; }

/* ── Questions repliables (25/10 : « les personnes scrollent vite ») ─────── */
.qr__item > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 28px 0; cursor: pointer; list-style: none; }
.qr__item > summary::-webkit-details-marker { display: none; }
.qr__item > summary:hover h3 { color: var(--accent-lisible); }
.qr__item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.qr__item h3 { transition: color var(--survol); }
.qr__court { padding: 4px 12px; border-radius: 999px; background: var(--menthe); color: var(--accent-lisible); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.qr__plus { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--ligne); border-radius: 50%; background: var(--blanc); transition: transform 250ms var(--entree), background-color var(--survol), border-color var(--survol); }
.qr__plus::before, .qr__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--encre); transform: translate(-50%, -50%); }
.qr__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.qr__item > summary:hover .qr__plus { border-color: var(--accent); }
.qr__item[open] .qr__plus { transform: rotate(45deg); background: var(--degrade-bouton); border-color: transparent; }
.qr__item[open] .qr__plus::before, .qr__item[open] .qr__plus::after { background: #fff; }
.qr__reponse { max-width: 72ch; padding: 0 0 30px; }
.qr__item[open] .qr__reponse { animation: qr-ouvre 260ms var(--entree) both; }
@keyframes qr-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .qr__item > summary { gap: 10px; padding: 22px 0; } .qr__item h3 { font-size: 1.125rem; } .qr__plus { width: 32px; height: 32px; } }

/* ── L'essentiel, sous le titre des offres ───────────────────────────────── */
.essentiel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 640px; margin-top: 28px; }
.essentiel li { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre-douce); color: var(--encre); font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.essentiel__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--degrade-bouton); color: #fff; }
.essentiel__ico .ico { width: 20px; height: 20px; }
@media (max-width: 600px) { .essentiel { gap: 8px; } .essentiel li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: .875rem; } .essentiel__ico { width: 34px; height: 34px; } }

/* ── Contact à portée de pouce au téléphone ─────────────────────────────── */
.flottant { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--degrade-bouton); color: #fff; font-weight: 600; text-decoration: none; box-shadow: var(--lueur), 0 16px 32px -12px rgba(9, 52, 49, .45); opacity: 0; transform: translateY(16px); transition: opacity 250ms var(--entree), transform 250ms var(--entree); }
.flottant .ico { width: 20px; height: 20px; }
.flottant.est-visible { opacity: 1; transform: none; }
.flottant:hover { color: #fff; }
@media (min-width: 1081px) { .flottant { display: none; } }
@media (prefers-reduced-motion: reduce) { .flottant, .qr__plus { transition: none; } .qr__item[open] .qr__reponse { animation: none; } }
@media print { .flottant { display: none; } }
.telephone__vue img { min-height: 100%; object-fit: cover; object-position: top; }   /* une capture plus courte que l'écran le remplit quand même */
@media (max-width: 600px) { .qr__item > summary { padding: 18px 0; } .qr__reponse { padding-bottom: 22px; } .flottant { min-height: 48px; padding: 0 18px 0 16px; } }
.qr__item > summary { grid-template-columns: minmax(0, 1fr) auto 36px; }   /* le « + » toujours dans sa colonne, avec ou sans Oui / Non */
.qr__item > summary > h3 { grid-column: 1; }
.qr__court { grid-column: 2; }
.qr__plus { grid-column: 3; }
@media (max-width: 600px) { .qr__item > summary { grid-template-columns: minmax(0, 1fr) auto 32px; } }
.qr-titre { margin-bottom: 8px; }
/* l'encoche dans le bord du téléphone : elle ne cache plus rien du site qui défile (visiteurs du 25/10) */
.telephone__cadre { padding: 28px 10px 16px; }
.telephone__cadre::before { top: 10px; width: 56px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.telephone__vue { border-radius: 26px; }

/* ── Tour 3 des visiteurs (25/10) ───────────────────────────────────────── */
@media (min-width: 1081px) { .bouton--appel { display: none; } }   /* un lien tel: ne sert à rien sur un ordinateur */
@media (max-width: 1080px) { .mobile__panneau > ul > li:last-child { position: sticky; bottom: -22px; padding: 10px 0 22px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 18px); } .mobile__contact { margin-top: 8px; } }   /* le bouton reste visible en bas du menu ouvert */
.projet__image picture { display: block; }
.qr__item { scroll-margin: 110px 0 24px; }

/* ── Revue du directeur artistique (25/10) ─────────────────────────────── */
/* le site du client dans le téléphone aussi au téléphone, sous le titre des offres (pas sur les fiches : l'écran suit) */
@media (max-width: 1080px) {
  .telephone { display: block; justify-self: center; margin-top: 36px; }
  .telephone--bureau { display: none; }
  .telephone__cadre { width: 228px; }
}
/* les trois étapes compactes au téléphone : le numéro à gauche, le texte à droite */
@media (max-width: 600px) {
  .methode { gap: 10px; }
  .pas { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 18px 18px 20px 16px; }
  .pas__num { grid-row: span 2; margin: 2px 0 0; width: 40px; height: 40px; }
  .pas h3 { margin: 0 0 4px; font-size: 1.0625rem; line-height: 1.3; }
  .pas p { font-size: .9375rem; }
  .bande { padding-top: 40px; padding-bottom: 40px; margin-bottom: 40px; }
  .section { padding: 44px 0; }
  .section--serre { padding-top: 24px; }
}
/* réalisations associées : une rangée qu'on fait glisser au doigt */
@media (max-width: 600px) {
  .associees .projets { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 14px; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
  .associees .projets::-webkit-scrollbar { display: none; }
  .associees .projet { scroll-snap-align: start; }
}
/* le carrousel : le nom du client AVANT sa capture (on lisait le slogan de Fivein comme celui de Matys) */
.slide.est-active { display: flex; flex-direction: column; }
.slide .slider__legende { order: -1; margin-bottom: 16px; }
/* Lionel en petit : le seul visage du site */
.avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 8px 20px -8px rgba(9, 52, 49, .4); }
.appel__signature { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.appel__signature > span { display: flex; flex-direction: column; }
.coordonnees__qui { display: flex; align-items: center; gap: 12px; }
@media (max-width: 480px) {
  .raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }   /* 2 × 2 compact au lieu de 4 grandes lignes */
  .raccourci { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: .875rem; line-height: 1.3; }
  .raccourci .sous__ico { width: 34px; height: 34px; }
}
@media (max-width: 1080px) { .tete-page__grille { gap: 0; } }
@media (max-width: 600px) { .qr__item > summary { padding: 14px 0; } .qr__item h3 > span::before { margin-bottom: 4px; } .qr__item h3 { line-height: 1.25; } }
/* derrière la barre flottante : un fond, pour que le texte qui défile ne se voie plus autour d'elle (5 visiteurs) */
.tete::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -14px; height: calc(100% + 26px); background: linear-gradient(var(--ivoire) 62%, rgba(244, 250, 249, 0)); pointer-events: none; }
@media (max-width: 1080px) { .tete::before { top: -10px; height: calc(100% + 22px); } }
.tete-page__forme { -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }   /* le halo fondu, plus coupé net au bord du haut de page */
.tete::before { opacity: 0; transition: opacity 200ms var(--entree); } .tete.est-decolle::before { opacity: 1; }   /* en haut de page, rien ne passe sous la barre : le halo reste entier */
.tete-page__forme { top: -6%; }   /* entier dans le haut de page : plus de bord coupé net (revue DA du 25/10) */

/* ── Accueil « percutant » (Lionel, 25/10) : chaque offre = une vraie image + le titre + une phrase-choc ── */
.porte { grid-template-columns: 96px minmax(0, 1fr) 22px; gap: 18px; padding: 12px 18px 12px 12px; }
.porte__visuel { position: relative; display: block; width: 96px; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--encre); box-shadow: 0 10px 22px -12px rgba(9, 52, 49, .45); }
.porte__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 400ms var(--entree); }
.porte:hover .porte__visuel img { transform: scale(1.06); }
.porte__visuel--flux { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px; background: var(--degrade-bouton); }
.porte__visuel--flux i { display: grid; place-items: center; width: 64px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--accent-lisible); }
.porte__visuel--flux i + i { opacity: .82; } .porte__visuel--flux i + i + i { opacity: .64; }
.porte__visuel--flux .ico { width: 14px; height: 14px; }
.porte__titre { font-size: 1.3125rem; }
.porte__ligne { margin-top: 4px; font-size: 1rem; font-weight: 500; color: var(--encre); }
@media (max-width: 560px) {
  .porte { grid-template-columns: 76px minmax(0, 1fr) 18px; gap: 14px; padding: 10px 14px 10px 10px; }
  .porte__visuel { width: 76px; border-radius: 12px; }
  .porte__visuel--flux i { width: 52px; height: 16px; }
  .porte__titre { font-size: 1.125rem; }
  .porte__ligne { font-size: .9375rem; }
}

/* ── La bande des réalisations, sous le carrousel ── */
.preuves { padding: 8px 0 clamp(40px, 5vw, 64px); }
.preuves__titre { margin: 0; font-family: var(--corps); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lisible); }
@media (prefers-reduced-motion: reduce) { .porte__visuel img { transition: none; } }
@media (max-width: 600px) { .preuves { padding-top: 0; } }

/* Automatisation & IA (Lionel, 25/10 : « sois concret ! ») : la conversation WhatsApp, les autres tâches, le projet en service */
@media (min-width: 901px) { .vedette--inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .vedette--inverse > .vedette__texte { order: 2; } }
.discussion { margin: 0; overflow: hidden; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre-douce); }
.discussion__entete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ligne); }
.discussion__entete strong { display: block; font-family: var(--titre); line-height: 1.2; color: var(--encre); }
.discussion__entete span span { display: block; font-size: .875rem; color: var(--discret); }
.discussion__fil { display: grid; gap: 10px; padding: 18px; background: var(--surface-2); }
.bulle { max-width: 86%; margin: 0; padding: 10px 14px; border-radius: var(--rayon-petit); font-size: .9375rem; line-height: 1.45; color: var(--encre); }
.bulle--client { justify-self: start; background: var(--blanc); border: 1px solid var(--ligne); border-bottom-left-radius: 4px; }
.bulle--ia { justify-self: end; background: rgba(16, 208, 192, .16); border-bottom-right-radius: 4px; }
.discussion__note { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 0; padding: 12px 14px; border-radius: var(--rayon-petit); background: var(--bouton); color: #fff; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.discussion__note .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--vif-1); }
.exemples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.exemple { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre-douce); }
.exemple__titre { margin: 0; font-family: var(--titre); font-size: 1.125rem; line-height: 1.25; color: var(--encre); }
.exemple p { margin: 0; font-size: .9375rem; }
@media (max-width: 1000px) { .exemples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .exemples { grid-template-columns: minmax(0, 1fr); gap: 12px; } .exemple { padding: 18px; } }
.en-service { display: flex; align-items: center; gap: 18px; margin-top: 40px; padding: 22px 26px; border-radius: var(--rayon); background: var(--bouton); color: #fff; }
.en-service .sous__ico { width: 52px; height: 52px; background: rgba(255, 255, 255, .1); color: var(--vif-1); }
.en-service .surtitre { margin-bottom: 8px; color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); }
.en-service__texte { margin: 0; font-family: var(--titre); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: #fff; }
@media (max-width: 560px) { .en-service { align-items: flex-start; padding: 18px; } .en-service__texte { font-size: 1.125rem; } }

/* La ligne des logos (Lionel, 25/10 : « sur une ligne les logos qui défilent et mets UMONS en avant ») : un défilement
   lent, arrêté au survol, au focus ou par le bouton ; immobile et défilable à la main si le visiteur demande moins de mouvement. */
.preuves__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.preuves__umons { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; color: var(--encre); font-weight: 600; line-height: 1.35; }
.preuves__umons img { flex: none; width: 94px; }
.preuves__actions { display: flex; align-items: center; gap: 14px; }
.rond--petit { width: 36px; height: 36px; }
.rond--petit .ico { width: 16px; height: 16px; }
.defile { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.defile__piste { display: flex; width: max-content; animation: defile 80s linear infinite; }
.defile:hover .defile__piste, .defile:focus-within .defile__piste, .defile.est-arrete .defile__piste { animation-play-state: paused; }
.defile__liste { display: flex; align-items: center; gap: 56px; margin: 0; padding: 10px 56px 10px 0; }
.logo-client { display: grid; place-items: center; height: 56px; border-radius: 8px; transition: transform var(--survol); }
.logo-client:hover { transform: translateY(-2px); }
@keyframes defile { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .preuves__umons { font-size: .9375rem; }
  .preuves__umons img { width: 80px; }
  .defile__liste { gap: 40px; padding-right: 40px; }
  .logo-client img { transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .defile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .defile__piste { animation: none; padding-left: var(--gouttiere); }
  .defile__liste[aria-hidden="true"], [data-defile-pause] { display: none; }
  .logo-client { transition: none; }
}

/* Les cartes des projets en maquette (Lionel, 25/10 : « mockups plutôt ? ») : la fenêtre du site sur ordinateur qui monte
   du bas de la carte, et le même site sur un téléphone posé devant, à droite. */
.maquette { position: relative; aspect-ratio: 16 / 11; padding: 8% 15% 0 6%; background: radial-gradient(120% 90% at 90% 100%, rgba(16, 208, 192, .24), transparent 62%), linear-gradient(160deg, #eef8f6, #dfefec); }
.maquette__fenetre { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 10px 10px 0 0; background: var(--blanc); box-shadow: 0 18px 38px -16px rgba(10, 54, 50, .45); }
.maquette__barre { display: flex; flex: none; gap: 5px; padding: 7px 10px; background: #f2f6f5; border-bottom: 1px solid var(--ligne); }
.maquette__barre i { width: 7px; height: 7px; border-radius: 50%; background: #d3dbd9; }
.projet__image.maquette img { aspect-ratio: auto; transition: none; }
.maquette__fenetre img { flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: left top; }   /* le logo et le titre restent visibles ; le téléphone couvre la droite */
.maquette__tel { position: absolute; right: 5%; bottom: 7%; width: 23%; padding: 4px; border-radius: 16px; background: #14211f; box-shadow: 0 16px 30px -12px rgba(10, 30, 28, .6); transition: transform var(--survol); }
.maquette__tel img { width: 100%; height: auto; border-radius: 12px; }
.projet:hover .projet__image.maquette img { transform: none; }
.projet:hover .maquette__tel { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .maquette__tel { transition: none; } .projet:hover .maquette__tel { transform: none; } }

/* Plus aucune fenêtre de navigateur (Lionel, 25/10 : « n'utilise pas une page d'un navigateur ») : dans les cartes, un
   téléphone seul qui monte du bas ; ailleurs, le téléphone qui défile, centré (« celui-ci donne bien », 4U). */
.maquette { display: flex; justify-content: center; align-items: flex-start; padding: 0; }
.maquette__tel { position: relative; right: auto; bottom: auto; width: 40%; margin-top: 7%; padding: 5px; border-radius: 24px; }
.maquette__tel img { border-radius: 19px; }
.telephone--seul { justify-self: center; margin: 0 auto; }
.telephone--seul .telephone__cadre { margin-inline: auto; }
@media (max-width: 1080px) { .telephone--seul { display: block; margin-top: 0; } }
.slide .telephone figcaption { display: none; }   /* le nom et le lien sont déjà au-dessus, dans la légende du carrousel */

/* ── Les appareils (Lionel, 25/10 : « ils font faux, les iPhone », « change un peu de mockup… tablette, Mac ») ──────────
   Un bord noir fin et régulier, un liseré de métal, l'îlot et la barre d'état de l'iPhone, le socle de l'ordinateur. */
.telephone__cadre { position: relative; width: 264px; aspect-ratio: auto; padding: 7px; border-radius: 50px; background: #050506; box-shadow: inset 0 0 0 1.5px #3c3c40, inset 0 0 0 3px #0d0d0f, 0 0 0 1px rgba(0, 0, 0, .25), 0 44px 80px -32px rgba(9, 52, 49, .55); }
.telephone__cadre::before { content: none; }
.telephone__cadre::after { content: ""; position: absolute; top: 24%; right: -2.5px; width: 3px; height: 12%; border-radius: 0 2px 2px 0; background: #2a2a2e; }
.telephone__ecran { display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 9 / 19.5; border-radius: 43px; background: #fff; }
.telephone__ecran--sombre { background: #000; }
.telephone__statut { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 4px 24px 0 30px; font: 600 13px/1 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; color: #000; }
.telephone__ecran--sombre .telephone__statut { color: #fff; }
.telephone__statut::before { content: ""; position: absolute; top: 10px; left: 50%; width: 31%; height: 22px; border-radius: 14px; background: #000; transform: translateX(-50%); }
.telephone__batterie { position: relative; width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3.5px; opacity: .9; }
.telephone__batterie::before { content: ""; position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1.5px; background: currentColor; }
.telephone__batterie::after { content: ""; position: absolute; top: 2.5px; right: -4px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.telephone__vue { flex: 1; min-height: 0; height: auto; aspect-ratio: auto; border-radius: 0; background: transparent; }
@media (max-width: 1080px) {
  .telephone__cadre { width: 236px; padding: 6px; border-radius: 45px; }
  .telephone__ecran { border-radius: 39px; }
  .telephone__statut { height: 34px; padding: 3px 21px 0 27px; font-size: 12px; }
  .telephone__statut::before { top: 9px; height: 20px; }
}
.appareil { margin: 0 auto; justify-self: center; }
.appareil figcaption { margin-top: 16px; text-align: center; font-size: .8125rem; color: var(--discret); }
.appareil figcaption a { color: var(--encre); font-weight: 600; text-decoration: none; }
@media (max-width: 1080px) { .appareil--bureau { display: none; } }
.tablette__cadre { position: relative; width: 340px; padding: 13px; border-radius: 30px; background: #050506; box-shadow: inset 0 0 0 1.5px #3c3c40, 0 0 0 1px rgba(0, 0, 0, .25), 0 44px 80px -32px rgba(9, 52, 49, .55); }
.tablette__cadre::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #1e1e22; transform: translateX(-50%); }
.tablette__vue { aspect-ratio: 3 / 4; border-radius: 17px; background: #fff; }
.ordinateur { width: min(100%, 560px); }
.ordinateur__ecran { position: relative; margin: 0 7%; padding: 2.6% 2.6% 3.2%; border-radius: 16px 16px 4px 4px; background: #050506; box-shadow: inset 0 0 0 1.5px #3c3c40; }
.ordinateur__ecran::before { content: ""; position: absolute; top: 1%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #1e1e22; transform: translateX(-50%); }
.ordinateur__vue { aspect-ratio: 16 / 10; border-radius: 3px; background: #fff; }
.ordinateur__socle { position: relative; height: 13px; border-radius: 2px 2px 14px 14px / 2px 2px 9px 9px; background: linear-gradient(#e8e9eb, #c3c7cb 45%, #8e949a); box-shadow: 0 30px 50px -22px rgba(9, 52, 49, .5); }
.ordinateur__socle::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; border-radius: 0 0 6px 6px; background: #a9aeb3; transform: translateX(-50%); }
@media (max-width: 600px) { .tablette__cadre { width: 290px; padding: 11px; border-radius: 26px; } .tablette__vue { border-radius: 15px; } .ordinateur__socle { height: 9px; } }

/* Les cartes : l'ordinateur portable et l'iPhone posé devant */
.maquette { display: block; padding: 0; }
.mini-mac { position: absolute; top: 11%; left: 7%; width: 74%; }
.mini-mac__ecran { display: block; padding: 2% 2% 2.6%; border-radius: 9px 9px 3px 3px; background: #050506; box-shadow: inset 0 0 0 1px #3c3c40; }
.projet__image.maquette .mini-mac__ecran img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 2px; }
.mini-mac__socle { position: relative; display: block; height: 7px; margin: 0 -7%; border-radius: 1px 1px 9px 9px / 1px 1px 6px 6px; background: linear-gradient(#e8e9eb, #c3c7cb 45%, #8e949a); box-shadow: 0 18px 26px -14px rgba(9, 52, 49, .5); }
.mini-mac__socle::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 3px; border-radius: 0 0 4px 4px; background: #a9aeb3; transform: translateX(-50%); }
.mini-tel { position: absolute; right: 6%; bottom: 8%; width: 21%; padding: 3px; border-radius: 15px; background: #050506; box-shadow: inset 0 0 0 1px #3c3c40, 0 16px 26px -10px rgba(10, 30, 28, .55); transition: transform var(--survol); }
.mini-tel::before { content: ""; position: absolute; z-index: 1; top: 3.4%; left: 50%; width: 30%; height: 2.6%; border-radius: 9px; background: #000; transform: translateX(-50%); }
.projet__image.maquette .mini-tel img { display: block; width: 100%; height: auto; border-radius: 12px; }
.projet:hover .mini-tel { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .mini-tel { transition: none; } .projet:hover .mini-tel { transform: none; } }

/* L'accueil : les réalisations qu'on fait glisser du doigt (Lionel, 25/10 : « retire les boutons… scroller à droite et à gauche ») */
.galerie { display: flex; gap: 18px; margin: 0; padding: 6px 2px 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }
.galerie__item { flex: 0 0 76%; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: center; }
.galerie__item .slider__type { margin: 0; }
.galerie__ligne { margin: 4px 0 16px; color: var(--encre); font-weight: 600; }
.galerie__aide { margin: 4px 0 0; text-align: center; font-size: .875rem; color: var(--discret); }
@media (max-width: 1080px) { .galerie { margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); scroll-padding-inline: var(--gouttiere); } .galerie__item { flex-basis: 72%; } }
@media (min-width: 1081px) { .tete-page__grille > .ordinateur { width: 460px; } }   /* dans une colonne « auto », 100 % ne veut rien dire : le texte était écrasé */
.galerie, .galerie__aide { position: relative; z-index: 1; }   /* la forme décorative de la vitrine restait au-dessus des projets suivants (banc du 25/10) */
.tablette__cadre, .telephone--seul .telephone__cadre, .vedette__visuel .telephone__cadre { margin-inline: auto; }   /* Lionel, 25/10 : « centre » (l'iPad était calé à gauche au téléphone) */
.telephone__cadre { margin-inline: auto; }

/* Des écrans d'application dans les appareils (Lionel, 25/10 : « comme si c'était un vrai projet en visuel dans un
   mockup », « ne mets pas les vrais chiffres ») : le texte suit la largeur de l'écran (cqw), quel que soit l'appareil. */
@media (max-width: 1080px) { .telephone--seul.telephone--bureau { display: none; } }
.ecran-app { height: 100%; overflow: hidden; container-type: inline-size; }
.ordinateur__vue:has(.ecran-app), .tablette__vue:has(.ecran-app) { overflow: hidden; }
.app { display: flex; flex-direction: column; gap: .7em; height: 100%; padding: .9em; font-family: var(--corps); font-size: 2.1cqw; line-height: 1.35; color: var(--encre); background: var(--ivoire); }
.tablette .app { font-size: 3.4cqw; }
.telephone .app { font-size: 4.6cqw; }
.app p { margin: 0; }
.app__barre { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding-bottom: .5em; border-bottom: 1px solid var(--ligne); }
.app__logo { font-family: var(--titre); font-weight: 700; }
.app__pastille { padding: .2em .6em; border-radius: 99px; background: rgba(16, 208, 192, .16); color: var(--accent-lisible); font-size: .85em; font-weight: 600; }
.app__corps--deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7em; flex: 1; min-height: 0; }
.app__carte { display: flex; flex-direction: column; gap: .45em; padding: .8em; border-radius: .7em; background: var(--blanc); border: 1px solid var(--ligne); }
.app__titre { font-weight: 700; }
.app__titre--petit { margin-top: .3em !important; font-size: .9em; color: var(--discret); }
.app__citation { font-style: italic; }
.app__meta { font-size: .85em; color: var(--discret); }
.app__puces { display: flex; flex-wrap: wrap; gap: .35em; }
.app__puces span { padding: .15em .55em; border-radius: 99px; background: #fff4db; color: #8a5a00; font-size: .85em; font-weight: 600; }
.app__lignes { display: grid; gap: .35em; margin: 0; }
.app__lignes li { display: flex; justify-content: space-between; gap: .6em; padding-bottom: .3em; border-bottom: 1px dashed var(--ligne); }
.app__lignes em { flex: none; font-style: normal; color: var(--discret); }
.app__total { font-weight: 700; border-bottom: 0 !important; }
.app__actions { display: flex; flex-wrap: wrap; gap: .4em; margin-top: auto !important; }
.app__bouton { padding: .35em .8em; border-radius: 99px; background: var(--degrade-bouton); color: #fff; font-weight: 600; font-size: .9em; }
.app__bouton--second { background: var(--blanc); color: var(--encre); border: 1px solid var(--ligne-2); }
/* la conversation */
.app--chat { gap: 0; padding: 0; background: #efeae2; }
.app__chat-tete { display: flex; align-items: center; gap: .6em; padding: .7em .9em; background: #f6f6f6; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.app__chat-tete strong { display: block; }
.app__chat-tete small { display: block; color: var(--discret); font-size: .8em; }
.app__avatar { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #cfd8dc; color: #fff; font-weight: 700; }
.app__fil { display: grid; align-content: start; gap: .55em; padding: .8em; }
.app .bulle { max-width: 86%; padding: .55em .75em; border-radius: .9em; font-size: 1em; line-height: 1.35; }
.app .bulle--client { justify-self: start; background: #fff; border: 0; border-top-left-radius: .2em; }
.app .bulle--ia { justify-self: end; background: #d9fdd3; border-top-right-radius: .2em; }
.app__note { padding: .6em .75em; border-radius: .7em; background: var(--bouton); color: #fff; font-size: .9em; }
/* Jerry's : le tableau de bord et la cuisine, à ses couleurs */
.app--jerrys { background: #17110e; color: #f5ede2; }
.app--jerrys .app__barre { border-bottom-color: rgba(255, 255, 255, .1); }
.app--jerrys .app__logo { color: #f3b23a; }
.app__onglets { display: flex; gap: .4em; font-size: .9em; }
.app__onglets span { padding: .25em .7em; border-radius: 99px; background: rgba(255, 255, 255, .06); color: #cbbfb1; }
.app__onglets .est-actif { background: #f3b23a; color: #17110e; font-weight: 700; }
.app__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.app__kpis p { padding: .6em; border-radius: .7em; background: #241b16; }
.app__kpis small { display: block; color: #cbbfb1; font-size: .8em; }
.app__kpis strong { display: block; font-family: var(--titre); font-size: 1.35em; color: #fff; }
.app--jerrys .app__carte { background: #241b16; border-color: rgba(255, 255, 255, .06); }
.app--jerrys .app__lignes li { border-bottom-color: rgba(255, 255, 255, .08); }
.app--jerrys .app__lignes em { color: #f3b23a; font-weight: 600; }
.app__graphe { display: flex; align-items: flex-end; gap: 4%; height: 6em; }
.app__graphe i { flex: 1; border-radius: .3em .3em 0 0; background: linear-gradient(#f3b23a, #c9822a); }
.app--cuisine { gap: .5em; }
.app__colonne { margin-top: .4em !important; font-size: .85em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cbbfb1; }
.app__commande { display: flex; gap: .7em; padding: .7em .8em; border-radius: .7em; background: #241b16; border-left: .3em solid #8d7f73; }
.app__commande strong { color: #fff; }
.app__commande--grill { border-left-color: #e8662e; }
.app__commande--prete { border-left-color: #4caf7a; }
.app--chat .app__fil { flex: 1; }
.app__saisie { margin: .6em !important; padding: .6em .9em; border-radius: 99px; background: #fff; color: #9aa3a1; }
.app__ajout { margin-top: auto !important; padding: .7em; border-radius: 99px; background: #f3b23a; color: #17110e; font-weight: 700; text-align: center; }

/* Des écrans vivants (Lionel, 25/10 : « sois plus réaliste et ajoute du dynamisme ») : les messages, les lignes du devis
   et les barres arrivent quand l'écran entre dans la vue ; sans JavaScript ou sans mouvement, tout est déjà là. */
.tablette .app { font-size: 3.6cqw; }
/* le devis */
.app--devis { gap: .8em; background: linear-gradient(180deg, #f2fbf9, var(--ivoire) 40%); }
.app__marque { display: flex; align-items: center; gap: .45em; font-family: var(--titre); font-weight: 700; }
.app__marque i { width: 1.4em; height: 1.4em; border-radius: .4em; background: var(--degrade-bouton); }
.app__pastille--ia { background: var(--degrade-bouton); color: #fff; background-size: 200% 100%; }
.app__client { display: flex; gap: .6em; align-items: flex-start; }
.app__client small { color: var(--discret); }
.app__avatar--client { flex: none; background: #f0b37e; }
.app__message { margin-top: .3em !important; padding: .6em .8em; border-radius: .2em .9em .9em .9em; background: var(--blanc); border: 1px solid var(--ligne); }
.app__doc { display: flex; flex-direction: column; gap: .6em; padding: .9em; border-radius: .9em; background: var(--blanc); border: 1px solid rgba(16, 208, 192, .35); box-shadow: 0 .8em 1.6em -1em rgba(10, 54, 50, .35); }
.app__doc-tete { display: flex; justify-content: space-between; align-items: center; }
.app__doc-tete span { padding: .15em .6em; border-radius: 99px; background: #eef2f1; color: var(--discret); font-size: .85em; font-weight: 600; }
.app__manque { padding: .6em .7em; border-radius: .7em; background: #fff8e6; }
.app__manque .app__puces { margin-top: .35em; }
/* WhatsApp, comme sur le téléphone de l'entreprise */
.app--chat { background: #efeae2 radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1.2px) 0 0 / 1.1em 1.1em; }
.app--chat .app__chat-tete { gap: .5em; padding: .55em .7em; background: #008069; color: #fff; border: 0; }
.app--chat .app__chat-tete small { color: rgba(255, 255, 255, .8); }
.app__retour { width: .6em; height: .6em; border-left: .14em solid #fff; border-bottom: .14em solid #fff; transform: rotate(45deg); margin: 0 .1em 0 .2em; }
.app--chat .app__avatar { width: 2em; height: 2em; background: #9fb8c0; }
.app__date { justify-self: center; padding: .2em .7em; border-radius: .5em; background: #fff; color: #54656f; font-size: .75em; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 1px .5px rgba(0, 0, 0, .1); }
.app--chat .bulle { position: relative; padding: .45em .6em 1.1em; box-shadow: 0 1px .5px rgba(0, 0, 0, .12); }
.bulle__ia { display: block; margin-bottom: .15em; color: #008069; font-size: .72em; font-weight: 700; }
.bulle__heure { position: absolute; right: .55em; bottom: .25em; color: #667781; font-size: .68em; }
.bulle__heure b { color: #53bdeb; font-weight: 700; letter-spacing: -.15em; }
.app__ecrit { justify-self: end; display: flex; gap: .25em; padding: .6em .75em; border-radius: .9em; background: #d9fdd3; }
.app__ecrit i { width: .45em; height: .45em; border-radius: 50%; background: #6b8f71; }
.app__systeme { justify-self: center; max-width: 92%; padding: .45em .7em; border-radius: .6em; background: #fff5c4; color: #4a4222; font-size: .82em; text-align: center; box-shadow: 0 1px .5px rgba(0, 0, 0, .1); }
.app--chat .app__saisie { display: flex; align-items: center; justify-content: space-between; margin: .5em !important; padding: .35em .35em .35em .9em; }
.app__saisie i { width: 2em; height: 2em; border-radius: 50%; background: #00a884; position: relative; }
.app__saisie i::after { content: ""; position: absolute; top: 50%; left: 55%; border: .38em solid transparent; border-left: .55em solid #fff; transform: translate(-50%, -50%); }
.app__ecrit { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .app__anim { opacity: 0; transform: translateY(.6em); }
  .js .est-visible .app__anim { animation: app-arrive 420ms var(--entree) forwards; animation-delay: var(--d, 0s); }
  .js .app__ecrit { display: flex; opacity: 0; max-height: 0; padding-block: 0; overflow: hidden; }
  .js .est-visible .app__ecrit { animation: app-ecrit 1.4s var(--entree) var(--d, 0s) both; }
  .js .est-visible .app__ecrit i { animation: app-point 900ms ease-in-out infinite; }
  .js .est-visible .app__ecrit i:nth-child(2) { animation-delay: 150ms; }
  .js .est-visible .app__ecrit i:nth-child(3) { animation-delay: 300ms; }
  .js .est-visible .app__graphe i { transform-origin: bottom; animation: app-barre 700ms var(--entree) both; animation-delay: calc(var(--k, 0) * 28ms + 200ms); }
  .js .est-visible .app__pastille--ia { animation: app-reflet 2.4s linear infinite; background-image: linear-gradient(110deg, #0da59b 0 40%, #5fe3d6 50%, #08a1c3 60% 100%); }
}
@keyframes app-arrive { to { opacity: 1; transform: none; } }
@keyframes app-ecrit { 0% { opacity: 0; max-height: 0; padding-block: 0; } 12%, 85% { opacity: 1; max-height: 3em; padding-block: .6em; } 100% { opacity: 0; max-height: 0; padding-block: 0; margin: -.55em 0 0; } }
@keyframes app-point { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-.2em); opacity: 1; } }
@keyframes app-barre { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes app-reflet { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* le tableau de bord, comme une vraie administration */
.app--tableau { gap: .6em; }
.app__menu { display: flex; gap: .2em; font-size: .78em; }
.app__menu span { padding: .2em .5em; border-radius: .4em; color: #cbbfb1; }
.app__menu .est-actif { background: rgba(243, 178, 58, .16); color: #f3b23a; font-weight: 700; }
.app__graphe-zone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5em; }
.app__axe { display: flex; flex-direction: column; justify-content: space-between; height: 6.4em; color: #8d7f73; font-size: .7em; text-align: right; }
.app--tableau .app__graphe { gap: 2.5%; height: 6em; background: repeating-linear-gradient(to top, rgba(255, 255, 255, .06) 0 1px, transparent 1px 33.33%); }
.app--tableau .app__graphe i { border-radius: .15em .15em 0 0; }
.app__dates { display: flex; justify-content: space-between; margin-left: 2.4em !important; color: #8d7f73; font-size: .7em; }
.app__barres { display: grid; gap: .45em; margin: 0; }
.app__barres li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; align-items: center; gap: .5em; font-size: .9em; }
.app__barres b { height: .55em; border-radius: 99px; background: linear-gradient(90deg, #c9822a, #f3b23a); }
.app__barres em { font-style: normal; color: #f3b23a; font-weight: 600; }
.app__classement { display: grid; gap: .5em; margin: .2em 0 0; }
.app__classement li { display: flex; align-items: center; gap: .55em; }
.app__classement strong { display: block; color: #fff; font-size: .92em; }
.app__classement small { display: block; color: #cbbfb1; font-size: .78em; }
.app__rang { display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: #f3b23a; color: #17110e; font-weight: 800; font-size: .85em; }
.app--jerrys .app__meta { color: #8d7f73; }