/*
 * anso.css — LA CHARTE GRAPHIQUE D'ANSO
 *
 * À quoi ça sert : toutes les couleurs, polices et formes du site, reprises du
 * PDF de présentation (fond crème, terracotta, ocre, vert sauge, noir chaud,
 * titres très fins, surtitres en petites capitales espacées).
 * Qui l'utilise : toutes les pages (index, espace, pages légales).
 *
 * POLICE : le PDF utilise « Jost ». Pour respecter le RGPD (une police chargée
 * depuis Google transmet l'adresse IP des visiteurs), on ne charge rien
 * d'extérieur : si Jost est installée on l'utilise, sinon Futura (Mac/iPhone),
 * sinon une police sans empattement proche. Pour la version exacte, déposer
 * assets/Jost.woff2 (voir LISEZ-MOI.md) : la règle @font-face ci-dessous la prendra.
 */
@font-face { font-family: 'Jost'; src: local('Jost'), url('../assets/Jost.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --creme: #F5F0E6;      /* fond de la couverture du PDF */
  --papier: #FBFAF7;     /* fond des pages intérieures */
  --noir: #211F1B;       /* noir chaud des titres */
  --gris: #6B6760;       /* texte courant */
  --trait: #E6E1D6;      /* filets fins */
  --terracotta: #C0603F; /* couleur d'accent principale */
  --terracotta-fonce: #A04A2D;
  --ocre: #D9A441;
  --sauge: #5A6B4A;
  --teinte-ocre: #F3E6CC;
  --teinte-sauge: #E5E8DC;
  --teinte-terracotta: #F2E3DC;
  --rayon: 22px;
}

* { box-sizing: border-box; }
/* Défilement uniquement vertical : rien ne doit jamais faire glisser la page vers la gauche ou la droite. */
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* iPhone : pas de grossissement automatique du texte */ }
html, body { max-width: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--noir);
  font-family: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  font-weight: 300; font-size: 18px; line-height: 1.65;
  overflow-x: clip; overflow-wrap: break-word; /* un très long mot ou e-mail passe à la ligne sans élargir la page ni couper les mots courants */
}
h1, h2, h3 { font-weight: 300; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: 0; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 1em; color: var(--gris); }
strong, b { font-weight: 500; color: var(--noir); }
a { color: var(--terracotta-fonce); }
.conteneur { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.mini { font-size: .85rem; }

/* Surtitre « 01 —— QUI JE SUIS » */
.surtitre { display: flex; align-items: center; gap: .9rem; text-transform: uppercase; letter-spacing: .32em; font-size: .8rem; color: var(--gris); margin-bottom: 1rem; }
.surtitre b { color: var(--terracotta); font-weight: 600; letter-spacing: .2em; }
.surtitre::before { content: ''; order: 1; width: 3rem; height: 1px; background: var(--trait); }
.surtitre b { order: 0; } .surtitre span { order: 2; }
.sauge .surtitre b { color: var(--sauge); } .ocre .surtitre b { color: var(--ocre); }

/* Trait tracé à la main sous un mot (le soulignement du logo) */
.souligne { background: no-repeat left bottom / 100% .35em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C40 2 90 6 130 3.5 S185 4 198 3.5' fill='none' stroke='%23C0603F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); padding-bottom: .22em; }

/* Boutons */
.bouton { display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 500; background: var(--terracotta); color: #fff; padding: .85rem 1.7rem; border-radius: 999px; text-decoration: none; transition: background .2s; }
.bouton:hover { background: var(--terracotta-fonce); }
.bouton.discret { background: transparent; color: var(--noir); border: 1px solid var(--trait); }
.bouton.discret:hover { background: var(--creme); }
.bouton.petit { padding: .4rem 1rem; font-size: .9rem; }
.bouton.danger { background: #8E2F1F; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* En-tête et pied de page */
.entete { position: sticky; top: 0; z-index: 10; background: rgba(251, 250, 247, .95); /* repli pour les iPhone anciens qui ne connaissent pas color-mix */ background: color-mix(in srgb, var(--papier) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; flex-wrap: wrap; }
.marque { font-weight: 600; letter-spacing: .3em; text-decoration: none; color: var(--noir); font-size: 1.1rem; }
.entete nav { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; font-size: .95rem; }
.entete nav a:not(.bouton) { color: var(--noir); text-decoration: none; letter-spacing: .04em; }
.pied { border-top: 1px solid var(--trait); padding-block: 3rem; margin-top: 5rem; font-size: .9rem; }
.pied .conteneur { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.pied p, .pied li { color: var(--gris); margin: 0 0 .3rem; } .pied ul { list-style: none; padding: 0; margin: 0; }
.pied h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .25em; color: var(--noir); }
.signature { text-transform: uppercase; letter-spacing: .3em; font-size: .75rem; color: var(--gris); }
.signature b { color: var(--noir); letter-spacing: .3em; }

/* Couverture */
.couverture { background: var(--creme); text-align: center; padding: 5rem 0 6rem; position: relative; overflow: hidden; }
.couverture .petit-titre { text-transform: uppercase; letter-spacing: .45em; font-size: .85rem; color: var(--gris); }
.couverture img.logo { width: min(520px, 80%); margin: 1rem auto; display: block; }
.couverture .accroche { font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--noir); max-width: 30ch; margin: 1rem auto 2rem; }
.couverture .accroche em { font-style: normal; font-weight: 500; color: var(--terracotta-fonce); }
.fleur { position: absolute; width: 70px; }
.fleur.a { top: 12%; left: 8%; } .fleur.b { bottom: 10%; right: 9%; width: 56px; }

section.bloc { padding-block: 5rem 0; }

/* Cartes pastel (services) */
.grille { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.carte { border-radius: var(--rayon); padding: 2rem; display: flex; flex-direction: column; gap: .4rem; }
.carte.ocre { background: var(--teinte-ocre); } .carte.sauge { background: var(--teinte-sauge); } .carte.terracotta { background: var(--teinte-terracotta); }
.carte .prix { font-weight: 500; color: var(--noir); margin-top: auto; padding-top: 1rem; }
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.pastilles li { background: var(--papier); border-radius: 999px; padding: .25rem .9rem; font-size: .9rem; font-weight: 400; color: var(--terracotta-fonce); }
.sauge .pastilles li { color: var(--sauge); } .ocre .pastilles li { color: #7C5A12; }

/* Liste de services avec pastille ronde (page « cinq façons ») */
.liste-services { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--trait); }
.liste-services li { display: grid; grid-template-columns: 56px 1fr auto; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--trait); }
.liste-services .rond { width: 56px; height: 56px; border-radius: 50%; background: var(--terracotta); }
.liste-services li:nth-child(2) .rond { background: var(--ocre); } .liste-services li:nth-child(3) .rond, .liste-services li:nth-child(5) .rond { background: var(--sauge); }
.liste-services h3 { margin: 0; font-size: 1.5rem; } .liste-services p { margin: 0; }
.liste-services .tarif { text-align: right; font-weight: 500; line-height: 1.3; }
.liste-services .tarif small { display: block; color: var(--gris); font-weight: 300; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; }
@media (max-width: 640px) { .liste-services li { grid-template-columns: 44px 1fr; } .liste-services .rond { width: 44px; height: 44px; } .liste-services .tarif { grid-column: 2; text-align: left; } }

.deux { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: center; }
.deux img { max-width: 100%; height: auto; }
.citation { border-left: 3px solid var(--terracotta); padding-left: 1.2rem; color: var(--noir); font-weight: 400; }
.coches { list-style: none; padding: 0; margin: 1.5rem 0; }
.coches li { padding: .7rem 0 .7rem 2rem; border-top: 1px solid var(--trait); position: relative; color: var(--noir); }
.coches li::before { content: '✓'; position: absolute; left: 0; color: var(--terracotta); }
.etapes { counter-reset: e; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.etapes div::before { counter-increment: e; content: counter(e); display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--sauge); border-radius: 50%; font-size: 1.8rem; margin-bottom: 1rem; }
.fin { background: var(--noir); color: #fff; text-align: center; padding: 5rem 0; margin-top: 5rem; }
.fin h2 { color: #fff; } .fin p { color: #D8D3C8; margin-inline: auto; max-width: 46ch; } .fin strong { color: #fff; }
.fin .surtitre { justify-content: center; color: #A8A298; }
.fin .souligne { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C40 2 90 6 130 3.5 S185 4 198 3.5' fill='none' stroke='%23D9A441' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Pages légales */
.texte { max-width: 760px; margin: 3rem auto 0; }
.texte h1 { font-size: clamp(2rem, 5vw, 3rem); } .texte h2 { font-size: 1.6rem; margin-top: 2.2rem; font-weight: 400; }
.texte li { color: var(--gris); margin-bottom: .4rem; }
.a-completer { background: #FFF1B8; color: #5a4200; padding: 0 .3em; border-radius: 4px; font-weight: 500; }

/* ----- Espace client / Anso ----- */
.appli { padding-block: 2.5rem 0; }
.carte-blanche { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.8rem; }
.onglets { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0 2rem; border-bottom: 1px solid var(--trait); }
.onglets button { background: none; border: 0; font: inherit; padding: .7rem 1.1rem; cursor: pointer; color: var(--gris); border-bottom: 2px solid transparent; letter-spacing: .03em; }
.onglets button[aria-selected=true] { color: var(--noir); border-bottom-color: var(--terracotta); font-weight: 500; }
label { display: block; font-size: .9rem; letter-spacing: .06em; color: var(--noir); font-weight: 400; margin: 1rem 0 .3rem; }
input, select, textarea { width: 100%; font: inherit; padding: .65rem .9rem; border: 1px solid #D7D1C4; border-radius: 12px; background: var(--papier); color: var(--noir); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
input[type=checkbox] { width: auto; margin-right: .6rem; }
.case { display: flex; align-items: flex-start; font-size: .9rem; color: var(--gris); margin: .8rem 0; letter-spacing: 0; }
.formulaire { max-width: 520px; }
.ligne2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.message { padding: .8rem 1rem; border-radius: 12px; margin: 1rem 0; font-size: .95rem; background: var(--teinte-ocre); color: var(--noir); }
.message.erreur { background: var(--teinte-terracotta); color: #7a2f17; } .message.ok { background: var(--teinte-sauge); color: #2f3d22; }

.cal-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.cal-entete h3 { margin: 0; text-transform: capitalize; }
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendrier .jour-nom { text-align: center; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; color: var(--gris); }
.jour { position: relative; aspect-ratio: 1; min-height: 52px; border: 1px solid var(--trait); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; padding: 0; overflow: hidden; color: var(--noir); }
.jour span { position: relative; z-index: 1; }
.jour.vide { visibility: hidden; }
.jour .demi { position: absolute; left: 0; right: 0; height: 50%; }
.jour .demi.m { top: 0; } .jour .demi.a { bottom: 0; }
.jour .demi.pris { background: repeating-linear-gradient(135deg, #E9E4D8, #E9E4D8 6px, #F1EDE3 6px, #F1EDE3 12px); }
.jour.passe, .jour.complet { cursor: not-allowed; color: #A7A196; }
.jour.choisi { outline: 2px solid var(--terracotta); background: var(--teinte-terracotta); }
.jour.libre:hover { border-color: var(--sauge); }
.legende { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; color: var(--gris); margin-top: .8rem; }
.legende i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .35rem; border: 1px solid var(--trait); background: #fff; }
.legende i.pris { background: repeating-linear-gradient(135deg, #E9E4D8, #E9E4D8 4px, #F1EDE3 4px, #F1EDE3 8px); }
.legende i.moi { background: var(--teinte-terracotta); border-color: var(--terracotta); }

.creneau { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .6rem; align-items: end; margin-bottom: .5rem; }
@media (max-width: 560px) { .creneau { grid-template-columns: 1fr 1fr; } }
table.devis { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0; }
table.devis th, table.devis td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--trait); }
table.devis td.n, table.devis th.n { text-align: right; white-space: nowrap; }
.defilement { overflow-x: auto; }
.etiquette { display: inline-block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .7rem; border-radius: 999px; background: var(--teinte-ocre); color: #7C5A12; }
.etiquette.accepte { background: var(--teinte-sauge); color: var(--sauge); } .etiquette.refuse, .etiquette.annule { background: var(--teinte-terracotta); color: var(--terracotta-fonce); }
.demande { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.4rem; margin-bottom: 1.2rem; background: #fff; }
.demande header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.actions input { width: 160px; }

/* Photos de projet (fresques) */
.photos { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
.photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; border: 1px solid var(--trait); cursor: zoom-in; background: var(--teinte-ocre); }

/* ----- Accueil en défilement : chaque point occupe tout l'écran ----- */
/* « proximity » : la page s'accroche à chaque point sans jamais piéger un contenu plus haut que l'écran (téléphones). */
html:has(body.accueil) { scroll-snap-type: y proximity; scroll-padding-top: 54px; }
.ecran { min-height: calc(100vh - 54px); min-height: calc(100svh - 54px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; padding-block: 3rem; }
.ecran.sauge { background: var(--teinte-sauge); }
.ecran.sauge .liste-services .carte { background: var(--papier); }
.ecran.fin { margin-top: 0; }
.couverture.ecran { padding-block: 3rem; }
/* Petites fleurs rouges de navigation à droite (une par point) : fleur à six pétales tracée au trait, comme celle du PDF. */
.points { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 9; display: flex; flex-direction: column; gap: 10px; }
.points a { width: 22px; height: 22px; opacity: .4; transition: transform .2s, opacity .2s;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='none' stroke='%23B8321F' stroke-width='1.5' stroke-linecap='round'%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(240)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(300)'/%3E%3C/g%3E%3C/svg%3E"); }
.points a:hover, .points a.actif { opacity: 1; transform: scale(1.25) rotate(20deg); }
@media (max-width: 700px) { .points { display: none; } }
/* Laisse de la place aux pastilles de droite pour qu'elles ne recouvrent jamais le texte. */
@media (min-width: 701px) { .accueil .conteneur { width: min(1120px, 100% - 7rem); } }

/* Téléphone : en-tête sur UNE ligne (logo + bouton). Avant, ses 4 lignes (≈125 px) recouvraient le haut de chaque section et « mordaient » les titres. */
@media (max-width: 700px) {
  .entete .conteneur { flex-wrap: nowrap; padding-block: .55rem; }
  .entete nav { flex-wrap: nowrap; gap: .8rem; }
  .entete nav a:not(.bouton) { display: none; }
  .entete .bouton.petit { padding: .4rem .9rem; font-size: .85rem; white-space: nowrap; }
  .marque { font-size: 1rem; }
}

/* Les petites fleurs décoratives ne doivent JAMAIS recouvrir du texte : dans les coins sur grand écran
   (il y a de la marge), mais sur téléphone et tablette elles passent dans le flux, centrées au-dessus et au-dessous du texte. */
@media (max-width: 899px) {
  .couverture .fleur { position: static; display: block; margin: 0 auto 1.2rem; width: 52px; height: auto; }
  .couverture .fleur.b { margin: 1.5rem auto 0; width: 44px; }
}

/* Petite fleur rouge au trait (même dessin que la navigation) pour remplacer les émojis dans les messages. */
.fleur-mini { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; margin-right: .3em;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='none' stroke='%23B8321F' stroke-width='1.5' stroke-linecap='round'%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(240)'/%3E%3Cellipse cx='0' cy='-6' rx='2.7' ry='5.3' transform='rotate(300)'/%3E%3C/g%3E%3C/svg%3E"); }