/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

<?php
/*
Template Name: Recyclic
*/
get_header(); ?>

<main id="recyclic-template">

  <!-- Section Hero -->
  <section class="hero">
    <div class="container">
      <h1>Recyclic</h1>
      <p class="subtitle">Le recyclage en un clic</p>
      <p class="desc">Chez nous le recyclage de votre matériel informatique n’aura jamais été aussi simple.</p>
      <a href="#engagements" class="btn">CLIQUEZ</a>
    </div>
  </section>

  <!-- Section Engagements -->
  <section id="engagements" class="engagements">
    <div class="container">
      <h2>Nos engagements</h2>
      <p class="intro">
        Nous sommes engagés dans le recyclage et le reconditionnement d’équipements informatiques...
      </p>

      <div class="engagement-grid">
        <div class="engagement">
          <div class="badge">1</div>
          <p>Récupération, recyclage et reconditionnement basés et certifiés en France</p>
        </div>
        <div class="engagement">
          <div class="badge">2</div>
          <p>Suivi du cycle de recyclage et des appareils expliqué en détail</p>
        </div>
        <div class="engagement">
          <div class="badge">3</div>
          <p>Procédés de recyclage et reconditionnement écoresponsables</p>
        </div>
      </div>

      <a href="#details" class="btn red">ICI</a>
    </div>
  </section>

  <!-- Section Avis -->
  <section class="testimonials">
    <div class="container">
      <h2>Votre avis compte pour nous</h2>
      <div class="testimonials-grid">
        <blockquote>
          <p>Service rapide et pratique ! ...</p>
          <cite>Claire Dupont</cite>
        </blockquote>
        <blockquote>
          <p>Très pro et super pratique. ...</p>
          <cite>Thomas Lefevre</cite>
        </blockquote>
      </div>
      <div class="btn-group">
        <a href="/boutique" class="btn">voir la boutique</a>
        <a href="/avis" class="btn">voir tout les avis</a>
      </div>
    </div>
  </section>

  <!-- Footer Custom -->
  <section class="custom-footer">
    <div class="container">
      <div class="footer-brand">
        <h3>Recyclic</h3>
        <p>Le recyclage en un clic</p>
        <a href="/contact" class="btn small">contactez nous</a>
      </div>
      <div class="footer-bottom">
        <small>Mentions légales | Données personnelles | Plan du site | CGV | CGA</small>
      </div>
    </div>
  </section>

</main>

<?php get_footer(); ?>
#recyclic-template {
  font-family: 'Orbitron', sans-serif;
}

.hero {
  background: linear-gradient(#043a5f, #1a5783);
  text-align: center;
  padding: 100px 20px;
  color: white;
}

.hero .btn {
  background: #4dbbdc;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}

.engagements {
  background: #f0ded4;
  padding: 80px 20px;
  text-align: center;
}

.engagement-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}

.engagement {
  max-width: 200px;
}

.badge {
  background: #d13c00;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto 10px;
  font-size: 24px;
}

.btn.red {
  background: #d13c00;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 40px;
  display: inline-block;
}

.testimonials {
  background: #19577d;
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.testimonials-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

blockquote {
  font-style: italic;
  position: relative;
  padding-left: 30px;
}

blockquote:before {
  content: "“";
  font-size: 40px;
  position: absolute;
  left: 0;
  top: -10px;
}

.btn-group {
  margin-top: 40px;
}

.btn-group .btn {
  margin: 10px;
  background: #c6e4ef;
  color: #000;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
}

.custom-footer {
  background: linear-gradient(#8be3a6, #c5ffcb);
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
}

.footer-brand .btn.small {
  font-size: 12px;
  padding: 6px 12px;
  background: #1d5448;
  color: white;
  margin-top: 10px;
  display: inline-block;
}

.footer-bottom {
  margin-top: 20px;
}