/* formulaire de contact (sections/contact.php): la carte de visite, plein ecran.
   Il part du bouton Nous ecrire et y revient; recto et verso cote a cote, ou une face a la fois sous 1000 px */
.cf{position:fixed;inset:0;z-index:80;background:var(--frame);color:var(--ink)}
.cf::after{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:calc(68px + env(safe-area-inset-top,0px));pointer-events:none;background:linear-gradient(#080808 62%,rgba(8,8,8,0))}
.cf:focus{outline:none}
:where(.cf) :is(input,select,textarea){font:inherit;color:inherit}
.cf-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cf-wrap{position:relative;width:min(1240px,100%);margin:0 auto;padding:76px 40px 28px;min-height:100%;display:flex;flex-direction:column}
.cf-x{position:fixed;z-index:3;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));width:44px;height:44px;display:grid;place-items:center;background:var(--surf);color:var(--ink)}
.cf-x:hover{background:var(--surf2)}
.cf-x svg{width:18px;height:18px}

/* apparition du contenu une fois le panneau pose */
.cf-rise{opacity:0;transform:translateY(16px);transition:opacity .16s linear,transform .16s linear}
.cf-landed .cf-rise{opacity:1;transform:none;transition:opacity .5s var(--out),transform .6s var(--out);transition-delay:calc(var(--d,0) * 70ms)}

.cf-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.cf-kick{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.cf-intro h2{margin:0;font:500 clamp(28px,3.3vw,44px)/1.05 var(--sans);letter-spacing:-.025em}
.cf-intro h2:focus{outline:none}
.cf-lede{margin:12px 0 0;max-width:560px;font-size:16px;color:var(--ink2)}
.cf-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;font:500 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.cf-btn.cf-pk{background:var(--pink);color:#fff}
.cf-btn.cf-pk:hover{background:var(--pink-deep)}
.cf-btn.cf-gh{background:var(--surf2);color:var(--ink)}
.cf-btn.cf-gh:hover{background:#3A3A3A}
.cf-btn svg{width:17px;height:17px;flex:none}
.cf-btn[aria-disabled="true"]{opacity:.6;cursor:progress}

/* les deux faces de la carte */
.cf-deck{position:relative;perspective:2200px}
.cf-flipper{display:grid;grid-template-columns:1.18fr 1fr;gap:28px;align-items:stretch}
.cf-face{position:relative;padding:26px 30px 28px}
.cf-recto{background:var(--cardbg);color:var(--cardink)}
.cf-verso{background:var(--surf);color:var(--ink);display:flex;flex-direction:column}
.cf-cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.cf-logo{display:block;width:152px;height:auto;color:var(--pink)}
.cf-cardmeta{margin:1em 0;font:500 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cardink2);text-align:right}

.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.cf-full{grid-column:1/-1}
.cf-f>label,.cf-f>legend,.cf-vlab{display:block;padding:0;margin:0 0 2px;font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cardink2)}
.cf-f>label em,.cf-f>legend em{font-style:normal;color:var(--pink-deep);letter-spacing:0}
.cf-f>label small,.cf-f>legend small{font-size:inherit;letter-spacing:.06em;text-transform:none;color:var(--cardink2)}
/* champs: un trait de saisie, rose au focus */
.cf-line{display:block;width:100%;height:44px;padding:8px 2px 4px;border:0;border-radius:0;background:transparent;color:var(--cardink);font:500 18px/1.2 var(--sans);border-bottom:1.5px solid var(--cardline);transition:border-color .15s,background .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.cf-line:hover{border-bottom-color:rgba(20,20,20,.55)}
.cf-line:focus{outline:none;border-bottom-color:var(--pink);box-shadow:0 1.5px 0 var(--pink);background-color:color-mix(in srgb,var(--pink) 6%,transparent)}
select.cf-line{padding-right:30px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:12px 8px}
select.cf-line:focus{background-color:color-mix(in srgb,var(--pink) 6%,transparent)}
select.cf-line option{color:#141414;background:#fff}
.cf-f.cf-bad .cf-line{border-bottom-color:var(--pink-deep);box-shadow:0 1.5px 0 var(--pink-deep)}
.cf-err{margin:6px 0 0;font:500 16px/1.3 var(--sans);color:var(--pink-deep)}

/* types de projet: des cases a cocher */
fieldset.cf-f{border:0;margin:0;padding:0;min-width:0}
.cf-chips{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:4px}
.cf-chip{position:relative}
.cf-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cf-chip span{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1.1 var(--sans);color:var(--cardink);cursor:pointer;user-select:none}
.cf-chip span::before{content:"";width:14px;height:14px;box-shadow:inset 0 0 0 1.5px currentColor;flex:none;transition:background .15s,box-shadow .15s}
.cf-chip:hover span::before{box-shadow:inset 0 0 0 1.5px var(--pink)}
.cf-chip input:checked+span::before{background:var(--pink);box-shadow:none}
.cf-chip input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}

.cf-flipbtn,.cf-backbtn{display:none}

/* verso: le message */
.cf-vhead{margin:0 0 16px;font:600 26px/1 var(--sans);letter-spacing:-.02em;color:#fff}
.cf-verso .cf-vlab{color:var(--ink3)}
.cf-verso .cf-vlab em{font-style:normal;color:var(--pink-light)}
.cf-msgf{flex:1;display:flex;flex-direction:column}
.cf-area{flex:1;display:block;width:100%;min-height:150px;resize:vertical;margin-top:4px;padding:6px 2px;border:0;border-radius:0;border-bottom:1.5px solid rgba(255,255,255,.32);color:#fff;font:500 18px/1.5 var(--sans);background:transparent;transition:border-color .15s,background .15s,box-shadow .15s}
.cf-area:hover{border-bottom-color:rgba(255,255,255,.55)}
.cf-area:focus{outline:none;border-bottom-color:var(--pink-light);box-shadow:0 1.5px 0 var(--pink-light);background:color-mix(in srgb,var(--pink) 8%,transparent)}
.cf-msgf.cf-bad .cf-area{border-bottom-color:var(--pink-light);box-shadow:0 1.5px 0 var(--pink-light)}
.cf-verso .cf-err{color:var(--pink-light)}
.cf-rgpd{margin:14px 0 0;font-size:13px;line-height:1.45;color:var(--ink3)}
/* champ piege anti-robots: hors de l'ecran, hors du clavier, hors des lecteurs d'ecran */
/* champ piege: hors de la vue sans sortir de la carte (au verso retourne, un left negatif l'envoyait a +10 000 px) */
.cf-hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip-path:inset(50%)}
.cf-fail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;font-size:16px;line-height:1.4;color:var(--pink-light)}
.cf-fail p{margin:0;flex:1 1 220px}
.cf-send{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.cf-status{margin:0;font-size:16px;color:var(--pink-light);min-height:1px}
/* carte envoyee: elle passe en retrait sous le message de remerciement */
.cf-sent .cf-deck{opacity:.6}

.cf-foot{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:30px}
.cf-backlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font:500 14px/1 var(--sans);color:var(--ink2)}
.cf-backlink:hover{color:var(--pink-light)}
.cf-backlink svg{width:16px;height:16px}

/* format etroit: une face a la fois, on retourne la carte */
@media (max-width:999px){
  .cf-wrap{padding:84px 16px 20px}
  .cf-intro{display:block;margin-bottom:34px}
  .cf-flipper{display:grid;grid-template-columns:1fr;gap:0;transform-style:preserve-3d;transition:transform .7s var(--out)}
  .cf-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding:22px 18px 22px}
  .cf-verso{transform:rotateY(180deg)}
  .cf-flipped .cf-flipper{transform:rotateY(180deg)}
  .cf-grid{grid-template-columns:1fr}
  .cf-logo{width:128px}
  .cf-flipbtn,.cf-backbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;margin-top:22px;font:500 14.5px/1 var(--sans)}
  .cf-flipbtn{background:var(--cardink);color:#fff}
  .cf-flipbtn:hover{background:#000}
  .cf-backbtn{margin-top:12px;color:var(--ink);background:var(--surf2)}
  .cf-backbtn:hover{background:#3A3A3A}
  .cf-flipbtn svg,.cf-backbtn svg{width:18px;height:18px}
  .cf-send .cf-btn{flex:1}
  .cf-foot{justify-content:center}
}
@media (max-width:420px){.cf-cardmeta{display:none}}
@media (min-width:1000px) and (max-height:760px){.cf-wrap{padding-top:68px}.cf-intro{margin-bottom:26px}.cf-lede{margin-top:8px}.cf-face{padding:22px 28px 24px}.cf-cardhead{margin-bottom:14px}.cf-grid{gap:12px 26px}.cf-foot{padding-top:20px}}

@media (prefers-reduced-motion:reduce){
  .cf-rise,.cf-landed .cf-rise{transform:none;transition:opacity .15s linear;transition-delay:0s}
  .cf-flipper{transition:none!important}
}