/* Maison de Curation : le texte d'accueil de Patricia (positionnement, trois phrases, six services), les six façons de travailler
   avec leur texte au survol, au toucher et au clavier, et la demande en deux parcours (portfolio, projet). Tout est préfixé pour
   ne rien changer au reste de index.html. Même langue que le site : camel et noir, titres Montserrat en capitales, bouton ellipse en pointillés. */

:root {
  --mesure: 60ch;
  --ecart: clamp(32px, 5vw, 96px);
  --bloc: clamp(48px, 7vw, 120px);
}

/* ---------- Accueil : trois phrases en bas-de-casse sous la ligne de positionnement ---------- */
.manifeste .accroche { text-wrap: balance; width: calc(250 * var(--u)); }
.manifeste .fait { width: calc(250 * var(--u)); }
.manifeste .fait p { font-size: calc(9.5 * var(--u)); line-height: 1.22; text-transform: none; }
.manifeste .fait p + p { margin-top: calc(4 * var(--u)); }
.qui-fin { display: none; }
@media (max-aspect-ratio: 1/1), (max-width: 640px) {
  .manifeste .accroche, .manifeste .fait { width: auto; }
  .manifeste .fait p { font-size: clamp(14px, 4vw, 19px); line-height: 1.4; margin-top: 0; }
  .manifeste .fait p + p { margin-top: 10px; }
  /* téléphone : la dernière phrase passe dans « Who's behind » pour garder un premier écran court */
  .manifeste .fait-fin { display: none; }
  .qui-fin { display: block; margin: 20px 0 0; max-width: 32em; font-size: 16px; line-height: 1.45; }
}

/* ---------- Barre du bas : deux entrées ---------- */
.barre { gap: clamp(18px, 3vw, 40px); }

/* ---------- Les six façons de travailler ---------- */
.maison-bloc { position: relative; z-index: 3; box-shadow: 0 -30px 60px rgba(0,0,0,.18); font: 400 16px/1.5 var(--police); font-style: normal; text-transform: none; letter-spacing: normal; text-align: left; }
@media (min-width: 1100px) { .maison-bloc { font-size: 17px; } }
.facons { background: var(--camel); color: var(--encre); padding: calc(var(--bloc) * .85) var(--marge) calc(var(--bloc) * .7); }
.maison-bloc :is(h2, h3, p, ul) { margin: 0; }
.maison-bloc a:focus-visible, .demande a:focus-visible, .demande button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.facons-titre { font: 300 var(--petit)/1.3 var(--police); font-style: italic; }
.facons .offres { list-style: none; padding: 0; margin-top: clamp(14px, 1.8vw, 24px); position: relative; }
.offres li { border-bottom: 1px solid currentColor; scroll-margin-top: 24px; }
.offres h3 button { all: unset; display: block; box-sizing: border-box; width: 100%; padding: clamp(14px, 1.7vw, 24px) 0; cursor: pointer;
  font: 700 clamp(22px, 2.8vw, 42px)/1.05 "Titre", "Montserrat", var(--police); letter-spacing: .04em; text-transform: uppercase; text-wrap: balance;
  color: var(--encre); -webkit-text-fill-color: transparent;
  background-image: var(--arc), var(--plein); background-repeat: no-repeat; background-size: 100% 400%, 100% 100%; background-position: 0 100%, 0 0;
  -webkit-background-clip: text; background-clip: text; }
.offres h3 button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.offres li.actif h3 button { animation: arc-facon .6s ease-out forwards; }
@keyframes arc-facon { from { background-position: 0 100%, 0 0; } to { background-position: 0 50%, 0 0; } }
@media (prefers-reduced-motion: reduce) { .offres li.actif h3 button { animation: none; background-position: 0 50%, 0 0; } }
/* Le faisceau : sur les appareils à curseur, une lumière violet -> pêche suit le pointeur et n'éclaire que les lettres */
@property --bx { syntax: '<length>'; inherits: false; initial-value: -2000px; }
@property --by { syntax: '<length>'; inherits: false; initial-value: -2000px; }
@property --faisceau { syntax: '<number>'; inherits: false; initial-value: 0; }
@media (hover: hover) {
  .facons.js .offres h3 button {
    contain: paint;
    background-image:
      radial-gradient(230px circle at var(--bx) var(--by), rgba(243, 228, 200, calc(.95 * var(--faisceau))) 0%, rgba(217, 162, 127, calc(.9 * var(--faisceau))) 30%, rgba(168, 119, 181, calc(.8 * var(--faisceau))) 62%, rgba(168, 119, 181, 0) 100%),
      var(--plein);
    background-size: 100% 100%, 100% 100%; background-position: 0 0, 0 0; background-repeat: no-repeat;
    transition: --bx .18s ease-out, --by .18s ease-out, --faisceau .9s ease;
  }
  .facons.js .offres li.actif h3 button { animation: none; }
  .facons.js .offres.allume h3 button { transition: --bx .18s ease-out, --by .18s ease-out, --faisceau .25s ease; }
  @media (prefers-reduced-motion: reduce) { .facons.js .offres h3 button { transition: --faisceau .9s ease; } }
}
.offres p { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.5; max-width: 30em; padding-bottom: clamp(16px, 2vw, 26px); }
@media (max-width: 899px) {
  .facons.js .offres li:not(.actif) p { display: none; }
}
@media (min-width: 900px) {
  /* la phrase se place à droite, à la hauteur du nom survolé (le script la remonte pour les derniers noms, sans dépasser la liste) ; rien ne bouge dans la page */
  .facons.js .offres { display: grid; grid-template-columns: 52% minmax(0, 1fr); column-gap: var(--ecart); }
  .facons.js .offres li { grid-column: 1; }
  .facons.js .offres li p { position: absolute; top: clamp(14px, 1.7vw, 24px); left: calc(52% + var(--ecart)); right: 0; padding: 0; opacity: 0; visibility: hidden; }
  .facons.pret .offres li p { transition: opacity .45s ease, visibility .45s; }
  .facons.js .offres li.actif p { opacity: 1; visibility: visible; }
}

/* Boutons ellipse en pointillés, le même dessin que sur l'accueil */
.appel { margin-top: clamp(28px, 3.5vw, 56px) !important; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ellipse-page { position: relative; display: inline-grid; place-items: center; min-width: 200px; min-height: 56px; padding: 0 28px; box-sizing: border-box;
  border: 0; border-radius: 50%; background: transparent; color: inherit; font: 700 15px/1.2 var(--police); text-decoration: none !important; cursor: pointer; }
.ellipse-page span { grid-area: 1 / 1; position: relative; z-index: 1; transition: transform .3s; }
.ellipse-page .trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ellipse-page .trace ellipse { fill: transparent; stroke: currentColor; stroke-width: 2.5px; stroke-linecap: round; stroke-dasharray: 0 7px; vector-effect: non-scaling-stroke; }
@keyframes defile-page { to { stroke-dashoffset: -14px; } }
.ellipse-page:hover .trace ellipse, .ellipse-page:focus-visible .trace ellipse { animation: defile-page 1.2s linear infinite; }
.ellipse-page:active span { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .ellipse-page:hover .trace ellipse { animation: none; } }

/* ---------- La demande : une boîte noire par-dessus la page, deux parcours ---------- */
.titre-bande { font: 700 clamp(26px, calc(23 * var(--u)), 52px)/1.05 "Titre", "Montserrat", var(--police); letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; }
dialog.demande { border: 0; padding: 0; margin: auto; background: var(--encre); color: var(--camel); width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; font: 400 16px/1.5 var(--police); }
dialog.demande::backdrop { background: rgba(0, 0, 0, .65); }
.demande-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(18px, 3vw, 32px) clamp(24px, 4vw, 56px) 0; }
.parcours { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.parcours button { background: none; border: 0; padding: 6px 0; color: inherit; font: italic 400 15px/1.2 var(--police); cursor: pointer; opacity: .6; border-bottom: 1px solid transparent; }
.parcours button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
.parcours button:hover { opacity: 1; }
.demande-form, .demande-merci { padding: clamp(18px, 3vw, 32px) clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px); display: grid; gap: clamp(16px, 2vw, 28px); margin: 0; }
.demande-form[hidden], .demande-merci[hidden], .demande-merci p[hidden], .parcours[hidden] { display: none; }
.demande :is(h2, p) { margin: 0; }
.demande-intro { max-width: var(--mesure); }
.demande-fermer { margin-left: auto; background: none; border: 0; color: inherit; font: 700 11px/1 var(--police); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
.demande-fermer:hover { text-decoration: underline; text-underline-offset: 4px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.champ { display: block; }
.champ-long { grid-column: 1 / -1; }
.champ span { display: block; font-size: 12px; font-style: italic; margin-bottom: 6px; }
.champ input, .champ select, .champ textarea { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--camel); color: var(--camel); font: 400 16px/1.3 var(--police); padding: 10px 0; border-radius: 0; caret-color: var(--camel); }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(160, 125, 87, .6); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.champ textarea { resize: vertical; min-height: 6em; }
.champ select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.champ select option { color: #000; background: #fff; }
.champ input:-webkit-autofill, .champ input:-webkit-autofill:hover, .champ input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #000 inset; box-shadow: 0 0 0 1000px #000 inset; -webkit-text-fill-color: var(--camel); transition: background-color 9999s ease-in-out 0s; }
.demande-note { font-size: 12px; font-style: italic; opacity: .8; }
.demande button.ellipse-page { justify-self: start; }
.demande-msg { font-size: 12px; font-style: italic; min-height: 1.3em; }
@media (max-width: 600px) { .champs { grid-template-columns: 1fr; } }

/* Clients : une phrase de preuve sous le titre, au-dessus du filet et des logos */
.marques .preuve { margin: clamp(14px, 1.6vw, 24px) auto 0; max-width: 46ch; text-align: center; text-wrap: balance;
  font: 400 clamp(15px, 1.2vw, 19px)/1.4 var(--police); color: var(--camel); }
@media (max-width: 760px) {
  .marques .preuve { margin: 16px 0 0; text-align: left; max-width: 34ch; font-size: 15px; }
}

/* Barre du bas : ses liens apparaissent et disparaissent en fondu, jamais d'un coup */
.barre .contact, .barre-logo, .barre-haut { transition: opacity .35s ease, visibility .35s; }
.barre[data-etat="hero"] :is(.contact, .barre-logo, .barre-haut) { opacity: 0; }
/* Clients : le lien vers la demande de portfolio, souligné finement dans la couleur de la phrase */
.marques .preuve a { display: table; margin: .75em auto 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (max-width: 760px) { .marques .preuve a { margin: .75em 0 0; } }
.marques .preuve a:hover { text-decoration-thickness: 2px; }
.marques .preuve a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }