/*
Theme Name: Cut to Fab
Theme URI: https://cut-to-fab.com
Author: Anata Conseil
Description: Vitrine « Cut to Fab » — reprend à l'identique les tokens du système de design de l'application (src/index.css) pour que la vitrine et l'app forment une seule surface visuelle. Thème de blocs : tout le contenu est éditable dans l'éditeur du site.
Version: 1.9.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cut-to-fab
Tags: full-site-editing, blocks, one-column, block-patterns
*/

/* ============================================================================
   Les couleurs, tailles, rayons et ombres viennent TOUS de theme.json, qui les
   recopie depuis src/index.css de l'app. Aucune valeur littérale de couleur ici
   — même règle que dans le dépôt de l'app.

   Règle héritée d'un vrai bug (REFONTE-DESIGN.md §5) : toute règle qui pose un
   `background` pose aussi sa `color`. On ne fait jamais reposer la couleur du
   texte sur l'héritage.
   ========================================================================= */

:root {
  --ctf-r-card: var(--wp--custom--radius--card);
  --ctf-r-btn: var(--wp--custom--radius--btn);
  --ctf-border: var(--wp--preset--color--border);
  --ctf-soft: var(--wp--preset--color--text-soft);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Anneau de focus unique pour tout le site, calqué sur celui de l'app. */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: var(--wp--custom--radius--sm);
}

::selection {
  background: #d5e6ff;
  color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ étiquette */

/* Équivalent du `.eyebrow` de l'app : capitales espacées au-dessus d'un titre. */
.ctf-eyebrow {
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--caps);
  text-transform: uppercase;
  color: var(--ctf-soft);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.ctf-mono {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- cartes */

.ctf-card {
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--text);
  border: 1px solid var(--ctf-border);
  border-radius: var(--ctf-r-card);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--lg);
  height: 100%;
}

.ctf-card h3 {
  margin-bottom: var(--wp--preset--spacing--xs);
}

.ctf-card p:last-child {
  margin-bottom: 0;
}

/* Une carte devient survolable seulement si elle est cliquable. */
.ctf-card--link:hover {
  border-color: #d6dae2;
  box-shadow: var(--wp--preset--shadow--float);
}

/* Colonnes de cartes : sur mobile WordPress empile déjà, mais sans égaliser les
   hauteurs — d'où le `height: 100%` ci-dessus et l'étirement ici. */
.ctf-cards .wp-block-column {
  display: flex;
}

/* ------------------------------------------------------ captures d'écran */

/* Bande qui porte la capture principale, sous le héros. */
.ctf-shot-band {
  padding-bottom: var(--wp--preset--spacing--xl);
}

/* Le héros pose 80 px sous ses boutons, ce qui isole la capture de la promesse
   qu'elle est censée prouver. Quand une capture suit immédiatement, on resserre
   à 40 px. `:has()` évite d'avoir à poser une classe conditionnelle dans le
   contenu ; là où il n'est pas compris, on retombe sur l'espacement large —
   moins joli, jamais cassé. */
.ctf-hero:has(+ .ctf-shot-band) {
  padding-bottom: var(--wp--preset--spacing--xl);
}

.ctf-shot {
  margin: 0;
}

/* `line-height: 0` supprime les quelques pixels fantômes que la ligne de texte
   réserve sous une image en flux — sans ça un liseré clair apparaît en bas du
   cadre, juste au-dessus de la bordure. */
.ctf-shot__frame {
  display: block;
  overflow: hidden;
  line-height: 0;
  background: var(--wp--preset--color--panel);
  border: 1px solid var(--ctf-border);
  border-radius: var(--ctf-r-card);
  box-shadow: var(--wp--preset--shadow--float);
  transition: box-shadow 160ms ease;
}

.ctf-shot__frame:hover {
  box-shadow: var(--wp--preset--shadow--modal);
}

.ctf-shot__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pas de règle de légende : il n'y a rien sous les captures. Tout le texte
   explicatif est au-dessus, en titre et chapô de section — voir le commentaire de
   `ctf_screenshot()` dans functions.php. */

/* -------------------------------------------------------------------- boutons */

/* Bouton secondaire : cadre clair sur fond blanc, comme `.btn` de l'app. */
.wp-block-button.ctf-btn-outline .wp-block-button__link {
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--text);
  border: 1px solid var(--ctf-border);
  box-shadow: none;
}

.wp-block-button.ctf-btn-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--panel-alt);
  color: var(--wp--preset--color--text);
  border-color: #d6dae2;
}

/* Bouton d'accent, avec le halo bleu de la maquette Atelier. */
.wp-block-button.ctf-btn-accent .wp-block-button__link {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  border: none;
  box-shadow: var(--wp--preset--shadow--accent);
}

.wp-block-button.ctf-btn-accent .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-dark);
  color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------------- pilules */

.ctf-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: 3px 10px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600;
  background: var(--wp--preset--color--panel-sunken);
  color: var(--ctf-soft);
}

.ctf-pill--ok {
  background: var(--wp--preset--color--ok-bg);
  color: var(--wp--preset--color--ok);
}

.ctf-pill--warn {
  background: var(--wp--preset--color--warn-bg);
  color: var(--wp--preset--color--warn);
}

.ctf-pill--accent {
  background: var(--wp--preset--color--accent-tint);
  color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------- en-tête */

.ctf-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  color: var(--wp--preset--color--text);
  border-bottom: 1px solid var(--ctf-border);
  backdrop-filter: saturate(180%) blur(12px);
}

/* Marque : monogramme du logo + nom en texte. Le `text-decoration: none` est
   explicite parce que c'est un `<a>` : sans lui il hériterait du soulignement au
   survol des liens de corps de texte, et la marque se lirait comme une note. */
.ctf-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
}

.ctf-brand:hover {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* Hauteur fixée, largeur libre : le monogramme n'est pas carré (153×173) et un
   `width` imposé l'écraserait. */
.ctf-brand__mark {
  display: block;
  height: 30px;
  width: auto;
}

.ctf-brand__name {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--large);
  letter-spacing: var(--wp--custom--tracking--tighter);
  color: var(--wp--preset--color--ink);
  white-space: nowrap;
}

/* -------------------------------------------------------- sélecteur de langue */

.ctf-langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ctf-border);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--panel);
}

.ctf-langs__item {
  padding: 3px 8px;
  border-radius: var(--wp--custom--radius--sm);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ctf-soft);
  text-decoration: none;
}

.ctf-langs__item:hover {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* La langue courante prend le fond d'encre, comme les segments actifs de l'app. */
.ctf-langs__item.is-current {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}

.ctf-langs__item.is-current:hover {
  color: var(--wp--preset--color--white);
}

/* Navigation : gris au repos, encre au survol — jamais de bleu souligné, qui
   ferait lire les onglets comme des liens de corps de texte. */
.ctf-nav a {
  color: var(--ctf-soft);
  font-size: var(--wp--preset--font-size--medium);
  text-decoration: none;
}

.ctf-nav a:hover {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.ctf-nav .current-menu-item > a {
  color: var(--wp--preset--color--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- héros */

.ctf-hero {
  padding-top: var(--wp--preset--spacing--section);
  padding-bottom: var(--wp--preset--spacing--section);
}

.ctf-hero h1 {
  font-size: var(--wp--preset--font-size--display);
  letter-spacing: var(--wp--custom--tracking--tighter);
  line-height: 1.05;
  max-width: 20ch;
  margin-inline: auto;
}

.ctf-lead {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  color: var(--ctf-soft);
  max-width: 60ch;
  margin-inline: auto;
}

/* ------------------------------------------------------- bandeau de section */

.ctf-section {
  padding-top: var(--wp--preset--spacing--section);
  padding-bottom: var(--wp--preset--spacing--section);
}

.ctf-section--panel {
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--text);
  border-top: 1px solid var(--ctf-border);
  border-bottom: 1px solid var(--ctf-border);
}

.ctf-section--ink {
  background: var(--wp--preset--color--ink);
  color: rgba(255, 255, 255, 0.72);
}

.ctf-section--ink :is(h1, h2, h3) {
  color: var(--wp--preset--color--white);
}

.ctf-section--ink a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--white);
  text-decoration: underline;
}

/* ------------------------------------------------------------------- tarifs */

.ctf-price {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--text);
  border: 1px solid var(--ctf-border);
  border-radius: var(--ctf-r-card);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--lg);
  height: 100%;
}

/* Le palier mis en avant est marqué par la bordure et l'ombre, pas par une
   couleur de fond : un fond bleu sur une carte de prix écrase la lisibilité
   des lignes de fonctionnalités, qui sont ce que le prospect vient lire. */
.ctf-price--highlight {
  border-color: #bcd4f5;
  box-shadow: var(--wp--preset--shadow--float);
}

.ctf-price__name {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}

.ctf-price__amount {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--tighter);
  color: var(--wp--preset--color--ink);
  line-height: 1.1;
  margin-top: var(--wp--preset--spacing--sm);
}

.ctf-price__note {
  font-size: var(--wp--preset--font-size--small);
  color: var(--ctf-soft);
  min-height: 2.6em;
}

.ctf-price__tagline {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--ctf-soft);
  margin-top: var(--wp--preset--spacing--sm);
}

.ctf-price__features {
  list-style: none;
  margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--md);
  padding: 0;
  font-size: var(--wp--preset--font-size--medium);
  display: grid;
  gap: var(--wp--preset--spacing--xs);
  flex: 1;
}

.ctf-price__features li {
  position: relative;
  padding-left: 22px;
  line-height: 1.45;
}

/* Coche dessinée en CSS : pas de fichier d'icône à charger, et elle prend la
   couleur de succès déjà mesurée WCAG AA de l'app. */
.ctf-price__features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--wp--preset--color--ok);
  border-bottom: 2px solid var(--wp--preset--color--ok);
  transform: rotate(-45deg);
}

.ctf-price__cta {
  margin-top: auto;
}

.ctf-price__cta .wp-block-button__link {
  width: 100%;
  text-align: center;
}

/* ------------------------------------------------------------------- FAQ */

.ctf-faq .wp-block-details {
  background: var(--wp--preset--color--panel);
  color: var(--wp--preset--color--text);
  border: 1px solid var(--ctf-border);
  border-radius: var(--wp--custom--radius--box);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.ctf-faq .wp-block-details summary {
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
}

.ctf-faq .wp-block-details p {
  color: var(--ctf-soft);
  margin-bottom: 0;
}

/* ------------------------------------------------------- avertissement légal */

/* Les pages CGV / mentions / confidentialité sont livrées vides exprès : leur
   texte est un acte juridique, pas du contenu de démonstration. Ce bandeau est
   visible en édition ET en façade pour qu'aucun brouillon ne passe en ligne
   sans qu'on le voie. */
.ctf-legal-todo {
  background: var(--wp--preset--color--warn-bg);
  color: var(--wp--preset--color--warn);
  border: 1px solid #e3c9a3;
  border-left-width: 3px;
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--medium);
}

.ctf-legal-todo strong {
  color: var(--wp--preset--color--warn);
}

/* ------------------------------------------------------- offre fondateur */
/* Bandeau de l'offre de lancement. Volontairement en accent-tint et non en
   « warn » comme .ctf-legal-todo : ce n'est pas un avertissement, c'est une
   proposition — la couleur d'alerte donnerait l'impression que le produit a un
   problème, alors que le message dit qu'il est jeune ET remisé pour ça. */
.ctf-founder {
  background: var(--wp--preset--color--accent-tint);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--ctf-r-card);
  padding: var(--wp--preset--spacing--md);
  max-width: 68ch;
  margin-inline: auto;
  margin-top: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--medium);
}

/* Bandeau de l'ouverture de lancement. Volontairement plus appuyé que l'encart
   fondateur juste en dessous : c'est la seule chose à lire si on ne lit qu'une
   ligne de cette section, et c'est ce qui fait essayer aujourd'hui. */
.ctf-open-access {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  border-radius: var(--ctf-r-card);
  padding: var(--wp--preset--spacing--md);
  max-width: 68ch;
  margin-inline: auto;
  margin-top: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--medium);
}

/* Le texte contractuel du blocage 24 mois. Il doit être lisible, pas mis en
   avant : c'est ce qu'on lit APRÈS avoir été intéressé par le bandeau. */
.ctf-founder-terms {
  max-width: 68ch;
  margin-inline: auto;
  margin-top: var(--wp--preset--spacing--xs);
}

/* Les quatre garanties de réversibilité. En deux colonnes dès qu'il y a la
   place : présentées en liste verticale unique, elles se lisent comme des
   conditions à subir plutôt que comme des arguments. */
.ctf-guarantees {
  list-style: none;
  padding: 0;
  margin: var(--wp--preset--spacing--md) auto 0;
  max-width: 900px;
  display: grid;
  gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 782px) {
  .ctf-guarantees {
    grid-template-columns: 1fr 1fr;
  }
}

.ctf-guarantees li {
  background: var(--wp--preset--color--panel);
  border: 1px solid var(--ctf-border);
  border-radius: var(--ctf-r-card);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--ctf-soft);
}

.ctf-guarantees li strong {
  color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ articles */

.ctf-postmeta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--small);
  color: var(--ctf-soft);
}

.ctf-prose :is(h2, h3) {
  margin-top: var(--wp--preset--spacing--xl);
}

/* ---------------------------------------------------------------- pied de page */

.ctf-footer {
  background: var(--wp--preset--color--panel);
  color: var(--ctf-soft);
  border-top: 1px solid var(--ctf-border);
  font-size: var(--wp--preset--font-size--small);
}

.ctf-footer a {
  color: var(--ctf-soft);
  text-decoration: none;
}

.ctf-footer a:hover {
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
}

/* Logo complet du pied de page. La baseline en dessous est du TEXTE : dans
   l'original elle mesure 12 px sur 300, donc réduite à la largeur d'un pied de
   page elle tomberait sous 5 px — illisible. En texte elle reste nette et
   traduisible. */
.ctf-footer__logo {
  display: block;
  width: 158px;
  height: auto;
}

.ctf-footer__baseline {
  margin: var(--wp--preset--spacing--xs) 0 0;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--caps);
  text-transform: uppercase;
  color: var(--ctf-soft);
}

.ctf-footer__brand a:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 781px) {
  .ctf-hero h1 {
    max-width: none;
  }

  .ctf-nav {
    display: none;
  }

  .ctf-section,
  .ctf-hero {
    padding-top: var(--wp--preset--spacing--xl);
    padding-bottom: var(--wp--preset--spacing--xl);
  }
}

/* ------------------------------------------------------------------ impression */

/* Les CGV et les mentions légales sont imprimées par des clients qui les
   archivent : sans ça l'en-tête collant se répète sur chaque page papier. */
@media print {
  .ctf-header,
  .ctf-footer,
  .wp-block-buttons {
    display: none !important;
  }
}