/* Page « Contacter notre équipe » — voix de conduite, 13/10/2026.
   Le parcours de Stripe (adresse, informations, suite, rendez-vous), dans la
   charte de MARMALADE : papier, encre, un seul accent citron. */

.ct-page{min-height:100vh; display:flex; flex-direction:column; background:var(--papier); position:relative; overflow:hidden}
.ct-tete{position:relative; z-index:2; border-bottom:1px solid var(--filet); background:rgba(255,255,255,.9)}
.ct-tete__in{display:flex; align-items:center; justify-content:space-between; height:70px}
.ct-tete .mm-marque img{display:block}

/* Les formes de la page d'accueil, en fond, à droite et en haut. */
.ct-fond{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ct-fond i{position:absolute; border-radius:46% 54% 38% 62% / 52% 38% 62% 48%; filter:blur(.5px)}
.ct-fond i:nth-child(1){width:560px; height:420px; right:-120px; top:40px; background:#F0CC00; opacity:.78; transform:rotate(-18deg)}
.ct-fond i:nth-child(2){width:420px; height:360px; right:180px; top:-140px; background:#E8A21A; opacity:.7; transform:rotate(22deg)}
.ct-fond i:nth-child(3){width:380px; height:300px; right:-60px; top:420px; background:#C7522A; opacity:.42; transform:rotate(8deg)}
.ct-fond i:nth-child(4){width:300px; height:260px; left:-120px; bottom:-60px; background:#F3D95C; opacity:.55; transform:rotate(-30deg)}

.ct-corps{position:relative; z-index:2; flex:1; display:flex; align-items:flex-start; justify-content:center; padding:var(--e9) var(--e4) var(--e9)}
.ct-carte{width:100%; max-width:720px; background:var(--blanc); border-radius:6px; border-top:4px solid #FFDA00;
  box-shadow:var(--ombre-f); padding:var(--e7) var(--e7) var(--e6)}

/* Les trois étapes, en haut de la carte. */
.ct-etapes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3); margin-bottom:var(--e7); list-style:none}
.ct-etapes li{font-size:var(--t-s); color:var(--encre-3); padding-bottom:var(--e3); border-bottom:2px solid var(--filet);
  display:flex; align-items:center; gap:var(--e2)}
.ct-etapes li::before{content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--filet-2); flex:none; box-sizing:border-box}
.ct-etapes li.en-cours{color:var(--encre); border-bottom-color:var(--encre)}
.ct-etapes li.en-cours::before{border-color:var(--encre)}
.ct-etapes li.faite{color:var(--encre); border-bottom-color:var(--citron)}
.ct-etapes li.faite::before{border:none; background:var(--citron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23121212' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

.ct-titre{font-family:var(--serif); font-weight:400; font-size:var(--t-2xl); line-height:1.12; letter-spacing:-.01em}
.ct-sous{color:var(--encre-2); font-size:var(--t-l); margin-top:var(--e2); margin-bottom:var(--e7); line-height:1.5}

.ct-champ{display:grid; grid-template-columns:200px 1fr; gap:var(--e5); align-items:center; margin-bottom:var(--e4)}
.ct-champ label{font-size:var(--t-s); font-weight:600}
.ct-champ label small{display:block; font-weight:400; color:var(--encre-3)}
.ct-champ input,.ct-champ select,.ct-champ textarea{width:100%; font:inherit; font-size:var(--t-m); color:var(--encre);
  border:1px solid var(--filet-2); border-radius:4px; padding:13px 14px; background:var(--blanc); min-height:50px}
.ct-champ textarea{min-height:110px; resize:vertical}
.ct-champ input:focus,.ct-champ select:focus,.ct-champ textarea:focus{outline:none; border-color:var(--encre); box-shadow:0 0 0 3px var(--citron-clair)}
.ct-champ--haut{align-items:start}
.ct-champ--haut label{padding-top:13px}
.ct-erreur{grid-column:2; color:#A1260D; font-size:var(--t-s); margin-top:calc(var(--e2) * -1)}
.ct-erreur:empty{display:none}
.ct-piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.ct-actions{display:flex; justify-content:space-between; align-items:center; gap:var(--e3); margin-top:var(--e6)}
.ct-actions .bt{cursor:pointer}
.ct-actions--droite{justify-content:flex-end}
.bt[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.ct-message{margin-top:var(--e4); font-size:var(--t-s); color:#A1260D}
.ct-message:empty{display:none}
.ct-note{font-size:var(--t-s); color:var(--encre-3); margin-top:var(--e5); line-height:1.5}

/* Étape 3 : les suites possibles. */
.ct-suites{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e4)}
.ct-suite{display:block; text-decoration:none; color:inherit; border:1px solid var(--filet); border-radius:4px; padding:var(--e5);
  transition:border-color .2s, transform .2s var(--ease), box-shadow .2s; cursor:pointer; background:var(--blanc); text-align:left; font:inherit}
.ct-suite:hover{border-color:var(--encre); transform:translateY(-1px); box-shadow:0 14px 30px -18px rgba(18,18,18,.35)}
.ct-suite__ic{width:44px; height:44px; border-radius:10px; background:var(--citron-clair); display:flex; align-items:center; justify-content:center; margin-bottom:var(--e4)}
.ct-suite h3{font-size:var(--t-l); font-weight:600; margin-bottom:var(--e2)}
.ct-suite p{color:var(--encre-2); font-size:var(--t-m); line-height:1.5}
.ct-suite span.ct-lien{display:inline-block; margin-top:var(--e4); font-weight:600; border-bottom:2px solid var(--citron)}
.ct-suites--un{grid-template-columns:1fr}

/* Étape 4 : le rendez-vous. */
.ct-mois{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--e4)}
.ct-mois b{font-size:var(--t-l); font-weight:600; text-transform:capitalize}
.ct-fleches{display:flex; gap:var(--e2)}
.ct-fleches button{width:38px; height:38px; border-radius:var(--r-s); border:1px solid var(--filet-2); background:var(--blanc); cursor:pointer; font-size:16px}
.ct-fleches button:disabled{opacity:.35; cursor:default}
.ct-jours{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--e2); margin-bottom:var(--e6)}
.ct-jour{border:1px solid var(--filet); border-radius:4px; padding:var(--e3) 0; text-align:center; cursor:pointer; background:var(--blanc); font:inherit}
.ct-jour small{display:block; font-size:var(--t-s); color:var(--encre-2); text-transform:capitalize}
.ct-jour b{display:block; font-size:22px; font-weight:500; margin-top:2px}
.ct-jour:hover{border-color:var(--encre)}
.ct-jour.choisi{border-color:var(--encre); background:var(--citron-clair)}
.ct-fuseau{font-size:var(--t-m); font-weight:600; margin-bottom:var(--e4)}
.ct-creneaux{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e3); min-height:120px; align-content:start}
.ct-creneau{border:1px solid var(--filet); border-radius:2px; padding:14px 0; text-align:center; font:inherit; font-size:var(--t-m); cursor:pointer; background:var(--blanc)}
.ct-creneau:hover{border-color:var(--encre)}
.ct-creneau.choisi{background:#FFDA00; border-color:#E8C500; font-weight:600}
.ct-fermer{float:right; width:36px; height:36px; border-radius:var(--r-s); border:1px solid var(--filet-2); background:var(--blanc); cursor:pointer; font-size:16px}

.ct-fin{text-align:center; padding:var(--e5) 0}
.ct-fin__ic{width:64px; height:64px; border-radius:50%; background:var(--citron); margin:0 auto var(--e5); display:flex; align-items:center; justify-content:center}

.ct-etape{display:none}
.ct-etape.active{display:block}

@media (max-width:760px){
  .ct-corps{padding:var(--e6) var(--e4) var(--e8)}
  .ct-carte{padding:var(--e6) var(--e5) var(--e5)}
  .ct-champ{grid-template-columns:1fr; gap:var(--e2)}
  .ct-champ--haut label{padding-top:0}
  .ct-erreur{grid-column:1}
  .ct-etapes li{font-size:12px}
  .ct-suites{grid-template-columns:1fr}
  .ct-jours{grid-template-columns:repeat(5,1fr)}
  .ct-jour b{font-size:18px}
  .ct-creneaux{grid-template-columns:repeat(2,1fr)}
  .ct-fond i:nth-child(1){width:320px; height:260px; right:-160px}
  .ct-fond i:nth-child(2){display:none}
}